javascript - 无法使用 .map() 分配给只读属性。使用 NextJs 反冲

Question

在我只使用 nextJs 之前一切都很好，但是在我尝试使用 recoil 并尝试使用 .map() 为数组对象分配新值但出现错误之后

Cannot assign to read only property 

这是我的示例数组对象

  const [allData, setAllData] = useRecoilState(
    allDataStatte
  );

这是示例状态 AllData

const allData = [ { id:1, value:"test1" }, { id:2, value:"test2" } ]

这是我的代码

const edit = (listId, value) => {
  allData.map((data) => {
    if (data.id === listId) {
      data.value = value;
    }
  });
};

例如我想像这样调用编辑功能

edit(1,"newTitle1")

我希望我的新 allData 输出看起来像这样

const data = [
  {
    id:1,
    value:"newTitle1"
  },
  {
    id:2,
    value:"test2"
  }
]

我读过有人告诉我必须使用 .slice() 来创建新对象，但仍然不使用如何将 slice 与数组对象一起使用

Answer 1

这是你需要做的，

const [allData, setAllData] = useRecoilState(allDataState);

const edit = (listId : number, value : string) => {
  let newAllData = allData.map((data) => {
    let newData = {...data};
    if (data.id === listId) {
      newData.value = value;
    }
    return newData;
  });
  setAllData (newAllData);
};
edit(1, 'new value 1');

注意，newAllData 是一个新数组。newData 也是一个从数据构造的新对象。

Answer 2

这是因为反冲中的原子，您必须重新创建对象数组，然后使用 _clondeep 或 slice 再次 setState