即使使用陈旧的键也可以重新渲染对象列表

问题描述

我正在修改整个react文档，并且众所周知，使用index作为键是文档指出的反模式

this and this

但是我正在尝试这段代码，并且元素的重新渲染仍然有效：

export default class App extends Component {
  constructor(props) {
    super(props);
    const list = [1,2,3,4,5,6,7,8,9];
    const listofObjects = list.map((item) => ({ value: item }));
    this.state = {
      list: listofObjects
    };
  }

  reshuffle = () => {
    const { list } = this.state;
    list.splice(2,1,{ value: 876 });
    this.setState({ list });
  };
  render() {
    const { list } = this.state;
    return (
      <div className="App">
        <ul>
          {list.map((item,index) => (
            <li key={index}>{item.value}</li>
          ))}
        </ul>
        <button onClick={this.reshuffle}>reshuffle</button>
      </div>
    );
  }
}

随机播放功能-进行拼接-删除条目并添加新条目-但是由于我使用的是索引-保持不变-为什么要重新渲染（实际上改变了文本节点）。 / p>

仅在列表映射到更大（或更深）的组件树时才适用吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）