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

Posted 2023-03-06

【中文标题】无法使用 .map() 分配给只读属性。使用 NextJs 反冲

【英文标题】：Cannot assign to read only property with .map(). Recoil with NextJs

【发布时间】：2021-07-16 10:00:04

【问题描述】：

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

Cannot assign to read only property 

这是我的示例数组对象

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

这里是示例状态 AllData

const allData = [ 编号：1， 值：“test1” , 编号：2， 值：“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 与数组对象一起使用

【问题讨论】：

我不使用 Recoil，但您不应该尝试直接修改这样的状态对象（显然它会主动阻止，这很方便。）另外，map is not for just looping。您可能确实需要map，但与上面不同的是，您实际上希望使用它的返回值。 （“可能”因为我不使用 Recoil。）

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

【参考方案2】：

这是因为 atom in recoil 必须重新创建对象数组，然后使用 _clondeep 或 slice 再次 setState