React中setState更新数组后渲染异常问题求助

嘿，我一眼就看出问题出在哪了——你在渲染<SomeComponent>的时候用了数组的index作为key！这正是导致你看到的奇怪现象的根源。

为什么会这样？ #

React依赖key来识别列表中的每个组件，判断哪些组件需要更新、添加或者删除。当你用index作为key时：

• 假设你删除了第二个元素（Lion/Tiger），新数组的index会变成0、1（对应原来的第一个和第三个元素）。
• React对比旧key（0,1,2）和新key（0,1）时，会错误地认为最后一个组件（key=2）被删除，而中间的组件（key=1）只是更新了props，把原来第三个元素的内容放到了第二个位置。
• 这就是为什么控制台显示数组正确，但渲染时删掉了最后一项——React的diff算法被index key误导了。

怎么解决？ #

你需要给每个列表项一个唯一且稳定的key，这个key要和数据本身绑定，而非它在数组中的位置。对于你的动物配对数据，可以用fromAnimal和toAnimal的组合生成唯一key：

{ this.state.pairs.map((pair) => {
  return <SomeComponent 
           key={`${pair.fromAnimal}-${pair.toAnimal}`} 
           pair={pair} 
           closePair={(fromAnimal, toAnimal) => this.closePairHandler(fromAnimal, toAnimal)} 
         />;
}) }

这样当你删除某个配对时，React能精准识别对应的组件应该被移除，不会再出现位置混淆的问题。

新手小贴士 #

除非你的列表是完全静态的（不会添加、删除、排序），否则别用index作为key。这是React新手高频踩坑点，记住key的核心作用是让React能精准定位每个列表项~

内容的提问来源于stack exchange，提问作者Sean