Javascript 从父组件重新排序子组件时出现问题'；s州

我正在从父状态的数组构建子元素列表。我可以将信息从子对象传递回父对象，并更新父对象的状态

但是，当我尝试对数组中的对象重新排序（以更改DOM中子对象的顺序）时，它会更改父状态下数组的顺序，但在重新渲染时不会更新它们在DOM中的位置

重述：

• 它会重新呈现父对象和子对象
• 它确实会更改this.state.array中objs的顺序
• 它不会对DOM中的子组件重新排序

我的理解是，它重新呈现，并在我的列表中重新迭代。如果我将新项目推送到数组的末尾，它将在重新渲染时渲染新项目，但不会移动使用拼接在数组中移动的项目

下面是一个简短的例子，试图展示我是如何构建它的：

类父级扩展组件{
建造师（道具）{
超级（）；
此.state={
数组：[{obj1}，{obj2}，{obj3}]
}
this.moveChild=this.moveChild.bind（this）；
this.updateChild=this.updateChild.bind（this）；
}
移动儿童（obj）{
//这将在数组中向左移动项
//obj是从child传递的child的状态
设索引=对象索引；
如果（索引--<0）{
指数=0；
}
this.setState（（prevState，props）=>{
返回this.state.array.splice（索引，0，this.state.array.splice（obj.index，1）[0]）；
});
}
updateChild（obj）{
//使用子对象的更改更新父对象的状态。
}
render（）{
返回({
this.state.array.map（（项，i）=>
<
子键={i}
updateChild={this.updateChild}
moveChild={this.moveChild}
item={item}
/> );}
}
}
类子扩展组件{
//具有跟踪多个参数的自身状态。
//具有使用updateChild将其状态传递给父级的函数
//具有将移动操作传递回父级的函数
render（）{
报税表（
移动
更新
);
}
}

您不应该在react中将数组索引用作列表键。请改用业务键。例如，当您的items对象看起来像：

const array = [{ id: 1, value: 'a' }, { id: 2, value: 'b' }, ...]

您可以使用

id

作为

键

：

<Child key={item.id}
  updateChild={this.updatechild}
  moveChild={this.moveChild}
  item={item.value}
/>

---

你可以在

中找到更多关于列表和键的信息哦，老兄，非常感谢你-我甚至没有想到重新排序时这会对数组造成什么影响。现在可以了-但是如果我从没有ID的外部源中提取项目，你对如何为项目生成ID有什么建议吗？我想如果密钥不重要，只需要be唯一我可以为每个导入的项目分配一个增量…@Brendanhaman确切地说，它们必须是唯一的。如果项目的文本是唯一的，您可以将其用作键。