修改对象的 useState 数组

问题描述

我有一个 useState 对象数组：

const [processes,setProcesses] = useState([]);

从数据库中获取值后它变成：

[{processId: 0,status: "true"},{processId: 1,status: "true"}]

现在我想给它添加新的属性，使它变成这样：

[{processId: 0,name:"process1",status: "true",active:"true"},name:"process2",active:"true"}]

名称的来源：

var allProcNames=["process1","process2"]

我尝试了以下方法：

var objProc = JSON.parse(JSON.stringify(processes));

objProc.map((proc) => ({
        ...proc,name: procNames[proc.processId],active: true,}));

但是它只记录相同的内容：

[{processId: 0,status: "true"}]

除了在db中为进程名称添加一个新列之外还能做什么？

解决方法

您可以像这样更改代码。

    let temp = objProc.map((proc) => {
      return ({
        ...proc,name: procNames[proc.processId],active: true,}));

   setProcesses(temp);

在这种情况下，您可以将所有过程数据存储在 temp 上，然后将值设置为 state。 别忘了回来。很有必要。

,

您不应该尝试直接改变状态。 （检查ref：https://reactjs.org/docs/react-component.html#setstate）

您可以使用 filter 或 map 方法并使用全新状态更新当前状态：

const [processes,setProcesses] = useState([
{processId: 0,status: "true"},{processId: 1,status: "true"}
]);

const arrayObjUpdater = () => {
  const newArrayState = processes.map((currentProcess,idx) => ({
          ...currentProcess,name: `proccess${idx}`,active: "true"
  }));
  console.log(newArrayState); // See output below

  return setProcesses(newArrayState);
}

arrayObjUpdater();
// Output: [{processId: 0,name:"process1",status: "true",active:"true"},name:"process2",active:"true"}]