0

我想在选择新过滤器时更新状态。初始状态显示我瞄准的对象结构。例如，我添加了一个过滤器选择（例如“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
      )
    )
  };

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

4

3 回答 3

0

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

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。

于 2020-02-18T15:03:50.360 回答
0 
const handleChange = (filter, label, value) => {
    filterValues.map(el => {
      for (let keys in el) {
        if (keys === filter) {
          el[filter] = [label, value];
          setFilterValues([el]);
        } else {
          let newObj = { [filter]: [label, value] };
          let finalArr = [...filterValues, newObj];
          setFilterValues(finalArr);
        }
      }
    });
  };
于 2020-02-18T15:14:23.817 回答
-1

通过键将过滤器数组标签值对存储在对象（即“映射”或“字典”）中，而不是数组中，允许您通过键进行恒定时间（O（1））查找以更新过滤器的值关键（复制和返回一个新的状态值仍然是OFC O(n)）。

此外，使用功能状态更新来正确访问先前的状态并排队状态更新。

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

const handleChange = (filter, label, value) => {
  setFilterValues(prevFilterValues => ({
    ...prevFilterValues,  // copy previous state
    [filter]: [label, value], // set the value for filter key
  }));
};

例子：

handleChange('f1', 'l1', 'v1');
// filterValues = { f1: ["l1", "v1"] }

handleChange('f2', 'l2', 'v2');
// filterValues = {
//   f1: ["l1", "v1"],
//   f2: ["l2", "v2"],
// }

handleChange('f1', 'l3', 'v3');
// filterValues = {
//   f1: ["l3", "v3"],
//   f2: ["l2", "v2"],
// }

演示：

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

// Manual mock for useState return values
let filterValues = { f1: ["l","v"] };
setFilterValues = stateUpdater => filterValues = stateUpdater(filterValues);

const handleChange = (filter, label, value) => {
  setFilterValues(prevFilterValues => ({
    ...prevFilterValues,  // copy previous state
    [filter]: [label, value], // set the value for filter key
  }));
};

// Start Demo
console.log('initial filterValues', filterValues); // { f1: ["l", "v"] }

handleChange('f1', 'l1', 'v1');
console.log('filterValues', filterValues); // { f1: ["l1", "v1"] }

handleChange('f2', 'l2', 'v2');
console.log('filterValues', filterValues); // { f1: ["l1", "v1"], f2: ["l2", "v2"] }

handleChange('f1', 'l3', 'v3');
console.log('filterValues', filterValues); // { f1: ["l3", "v3"], f2: ["l2", "v2"] }

于 2020-02-18T15:09:25.763 回答