反应问题 - 无法分配给对象 \'[object Array]\' 的只读属性 \'0\' ---答案

【问题标题】：react issue - Cannot assign to read only property '0' of object '[object Array]' ---反应问题 - 无法分配给对象 \'[object Array]\' 的只读属性 \'0\' ---
【发布时间】：2022-11-10 21:54:08
【问题描述】：

是什么导致 ff 问题？无法分配给对象“[object Array]”的只读属性“0”？

任何想法将不胜感激。谢谢。

#ts 代码sn-p

 const [RegionalList, setRegionalList] = useState<IRegionalList[]>(RegionalListData);


 const setEmailValue = (event: any, regionalId: number, index: number) => {
    setRegionalList((prevState: IRegionalList[]) => {
      const newState = prevState.map((prop: IRegionalList) => {
        if (prop.id === regionalId) {
          prop.emails[index] = { emailAddress: event.target.value, id: null };
          return { ...prop };
        }
        return prop;
      });
      return newState;
    });
  }

【问题讨论】：

prop.emails[index] = { .... }你在这里改变状态
如果我可以在这里问一下要避免这种情况吗？以及如何用上面的现有代码解决这个问题
是的，先生，因为我需要那个时间来更新对象
@adiga 是对的，我认为这会满足您的要求： return { ...prop,emails:[...prop.emails.filter( (_,i)=>i !== index ),{ emailAddress : event.target.value, id: null }] }
先生，您可以将其发布为答案，以便我投票吗？你能把它和我上面的示例代码集成在一起吗？谢谢。

标签： javascript reactjs typescript

【解决方案1】：

这是我建议的方式：

 const [RegionalList, setRegionalList] = useState<IRegionalList[]>(RegionalListData);


 const setEmailValue = (event: any, regionalId: number, index: number) => {
    setRegionalList((prevState: IRegionalList[]) => {
      const newState = prevState.map((prop: IRegionalList) => {
        if (prop.id === regionalId) {
         return { ...prop,emails:[...prop.emails.filter( (_,i)=>i !== index ),{ emailAddress: event.target.value, id: null }] } 
        }
        return prop;
      });
      return newState;
    });
  }

如果您关心列表的顺序，您可以这样做：

    const setEmailValue = (event: any, regionalId: number, index: number) => {
    setRegionalList((prevState: IRegionalList[]) => {
      const newState = prevState.map((prop: IRegionalList) => {
        if (prop.id === regionalId) {
         let emails = prop.emails;
         emails[index] = { emailAddress: event.target.value, id: null };
          return { ...prop,emails }
        }
        return prop;
      });
      return newState;
    });
  }

请让我知道它是否解决了您的问题

【讨论】：

嗨先生，只是一个问题，是什么让我现有的代码出错了？为什么不允许进行这种突变？谢谢。
嗨，我认为这是因为您不能直接更改状态值，而 prop.emails 是状态值，因此您不能使用“=”来更改其值，我在第二个解决方案中所做的只是为电子邮件返回新值，而 setRegionalList 将设置如果不清楚，我可以解释更多