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

问题描述

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

Cannot assign to read only property 

这是我的示例数组对象

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

这是示例状态 AllData

const allData = [ { 编号：1， 值：“测试1” },{ 编号：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() 创建新对象，但仍然没有使用如何将切片与数组对象一起使用

解决方法

这是你需要做的，

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

,

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