时间戳

首页 > 解决方案 > 如何在使用状态挂钩更新状态时覆盖具有相同键的对象

reactjs - 如何在使用状态挂钩更新状态时覆盖具有相同键的对象

问题描述

我想在选择新过滤器时更新状态。初始状态显示我瞄准的对象结构。例如，我添加了一个过滤器选择（例如“f2”），每个过滤器的标签是固定的，所以我们可以忽略它，但值可能是“va”。这很好，但是当我想将“f2”的值更改为“vb”时，我现在在我的状态 {“f2”：“va”} 和 {“f2”：“vb”} 中有两个条目，而我宁愿第一个被第二个覆盖。

 const [filterValues, setFilterValues] = useState([{"f1":["l","v"]}]);

 const handleChange = (filter, label, value) => {
   setFilterValues([
     ...filterValues,
     {[filter]: [label, value]}
   ]);
 };

我尝试调用 setFilterValues 两次（一次将条目映射到我的条件）来解决问题，但后来我什至根本没有更新状态：

 const handleChange = (filter, label, value) => {
    setFilterValues([
      ...filterValues,
      {[filter]: [label, value]}
    ]);
    let key = filter
    setFilterValues(
      filterValues.map(
        el => el.key == key?  { [key]: [label, value] } : el
      )
    )
  };

我对反应有点陌生，所以也许我没有得到更新功能组件状态的基本知识。有人可以帮我吗？谢谢你！

标签： reactjsreact-hooksreact-functional-componentuse-state

解决方案

这样做的方法是在设置状态之前找到正确的对象并更改其值：

const handleChange = (filter, label, value) => {
   const currentFilters = [...filterValues] // A new copy of the state.
   const newFilters = currentFilters.map(stateFilter => stateFilter[filter] ? {[filter]: [label, value]} : stateFilter)
   setFilterValues(newFilters);
 };

虽然我相信这可以解决您的问题，但我认为将过滤器存储在数组中会更好，这意味着对象结构为：

[[l1,v1], [l1, v2]]

这样，过滤器一只是过滤器数组上的索引 0，依此类推。所以要做你想做的事，你将有一个接收过滤器编号、标签和值的函数：

const handleChange = (filter, label, value) => {
   let newFilters = [...filterValues] // A new copy of the state.
   newFilters[filter - 1] = [label, value];
   setFilterValues(newFilters);
 };

请注意，如果您收到过滤器编号 1，表示第一个过滤器，您希望访问过滤器数组上的位置 0。

推荐阅读