时间戳

首页 > 解决方案 > 使用 React Hooks 更新状态数组对象的最佳方法？

reactjs - 使用 React Hooks 更新状态数组对象的最佳方法？

问题描述

实际上我有一个元素列表，它们必须作为反应状态存储到数组中。

const [data, setData] = useState([{"name": "joy", "age": 25}, {"name": "tom", "age": 41}]);

不知何故，我只需要更新一个特定的对象，可能是name或age。

我正在这样做。但是好像不太好。

    setData(prevState => {
      let obj = prevState.find(o => anycondition);
      if(obj !== undefined) {
        obj.name = "Demo";
      }
      return [...prevState];
    })

有没有其他方法可以使用 React Hooks 仅更新状态数组中的对象？

标签： reactjsreact-hooks

解决方案

这样做是状态突变！！

setData(prevState => {
  let obj = prevState.find(o => anycondition);
  if(obj !== undefined) {
    obj.name = "Demo"; // <-- state mutation
  }
  return [...prevState];
})

应该总是浅拷贝正在更新的当前状态

setData(prevState => {
  return prevState.map(el => <condition> ? { // <-- map state to new array
    ...el,        // <-- copy element
    name: "Demo", // <-- write new property
  } : el);
})

如果您需要在地图回调中进行任何计算，请给回调一个普通的函数体并添加任何所需的逻辑。

setData(prevState => {
  return prevState.map(el => { // <-- map state to new array
    // any mapping logic
    ...

    if (<condition>) {
      // any other logic
      ...
      return {
        ...el,        // <-- copy element
        name: "Demo", // <-- write new property
      }
    } else {
      return el;
    }
  });
})

推荐阅读