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

Question

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

Cannot assign to read only property

这是我的示例数组对象

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

这是示例状态 AllData

const allData = [ { id:1, 价值：“测试1” }, { id:2, 价值：“测试2” } ]

这是我的代码

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

因为原子反冲，你必须重新创建对象数组，然后使用 _clondeep 或 slice 再次设置状态

Answer 2

这是您需要做的，

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 也是从数据构造的新对象。

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

Cannot assign to read only property with .map(). Recoil with NextJs

javascript

reactjs

next.js

recoiljs

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

Cannot assign to read only property with .map(). Recoil with NextJs

javascript

reactjs

next.js

recoiljs

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