Reactjs 反应：如何从子组件更新数组中的对象

当一个新鼓被添加到设置鼓中的鼓阵列时，每个鼓组件都会显示，用户可以给鼓一个名称，如何将名称添加到鼓阵列中的鼓

我可以注销鼓id，但如何在数组中找到鼓，并仅使用用户输入的名称更新鼓

---

将数组更改为对象，然后像这样调用setrums怎么样：

editName={e=>setDrums{…drums，drums[drum.id]。名称：e.target.value} 更新 我还更新了代码盒

理论-为了更新值，我们需要一个数组标识符，它是每个鼓的索引

我创建了一个editDrumName函数，它接受两个参数，一个是事件，另一个是id。然后我在tempDrums变量中克隆了鼓，并用id更新了值

您不能对子组件执行此操作，因为在props中传递了值

从React导入React，{useState，useffect}； 从react-dom导入ReactDOM； const rootElement=document.getElementByIdroot； 常量鼓={id，count，remove，editName，name，index}=>{ const[声音，设置声音]=useStatecount； useEffect=>{ 如果声音>0 设置超时=>{ 控制台。播放声音； SetSoundsounds-1； }, 1000; }，[声音]； 回来 鼓{id}

磁鼓名称：{Name}

剩余声音：{sounds}

滚筒名称EditName，索引}/> 删除磁鼓{id} ; }; 常量应用==>{ 常数[鼓，设置鼓]=使用状态[]； const[nextId，setNextId]=useState0； const editDrumName=事件，id=>{ 让鼓=鼓； temptrums[id].name=event.target.value； 固定鼓[…临时鼓]； }; 回来 {drums.mapdrum，索引=> setDrumstrums.filterother=>drum.id！==other.id} editName={editDrumName}// } { 凝固[ 鼓 {id:nextId，count:Math.floorMath.random*100} ]; setnextid+1； }} > 加鼓 ; }; ReactDOM.render，根元素；

---

由于不能直接编辑原始数组，因为react状态应被视为不可变，因此每次更改时都应该对数组进行新引用

editName={event => {
  // set the new value to drum
  drum.name = event.target.value;
  // update drums state by creating shallow copy of the old one
  setDrums(drums.slice(0));
}}

---

参考：

正确的方法是通过阵列映射，找到鼓并更新它

我们不应该直接改变状态。对于对象，当我们复制它并更新复制对象的属性时，原始对象会发生变化

像这样

... const editName=e，id=>{ 凝固 drums.mapitem=>{ 如果item.id==id{ 返回{…项，名称：e.target.value}； } 退货项目； } ; }; ... {drums.mapdrum=> setDrumstrums.filterother=>drum.id！==other.id} editName={e=>editName，drum.id}// } {drums.mapdrum=> setDrumstrums.filterother=>drum.id！==other.id} editName={e=>editName，drum.id}// } ...

---

“使用对象将失去列表的顺序。@Bill这不是一个非常正确的解决方案，它会改变状态。”。虽然稍后会进行克隆，但当您尝试比较以前和当前状态中的drum.name等字段时，会出现问题。嗯，好的，我洗耳恭听，您能否编辑沙盒以显示如何在不发生变异的情况下执行此操作？@Bill这里有一个建议。切勿对id使用数值。请尝试改用UUID。将数值作为id并将其作为密钥传递总是会产生问题。谢谢你，Moshfiqur Rahman Rony博士，我会根据你的建议进行更改。你可以阅读此内容。这对我帮助很大-

editName={event => {
  // set the new value to drum
  drum.name = event.target.value;
  // update drums state by creating shallow copy of the old one
  setDrums(drums.slice(0));
}}