javascript - 嵌套组件列表未正确更新

Question

我有一个递归定义的组件树，如下所示:

class MyListItem extends Component {

 ...

 componentDidMount() {

   this.listener = dataUpdateEvent.addListener(event, (newState) => {
     if(newState.id == this.state.id) {
       this.setState(newState)
     }  
   })     

 }

 ...

 render() {
   return (
     <div>
       <h1>{this.state.title}</h1>
       <div>
       {this.state.children.map( child => {
         return (<MyListItem key={child.id} data={child} />)
       })}
       </div>
     </div>
   )
 }

}

所以基本上这个 View 呈现一系列嵌套列表来表示树状数据结构。 dataUpdateEvent 可以通过多种方式触发，旨在触发相关组件和所有子列表的重新加载。

但是我遇到了一些奇怪的行为。具体来说，如果一个 MyListItem 组件及其子组件快速连续更新，我会看到顶级列表按预期发生变化，但子列表仍处于未更改的状态。

有趣的是，如果我对列表项使用随机键，一切都会完美运行:

...
return (<MyListItem key={uuid()} data={child} />)
...

尽管存在一些不良的 UI 延迟。我的想法是，也许与基于 key 的缓存有关导致此问题。

我做错了什么？

Answer 1

React 使用键来映射更改，因此您需要这些键。如果您不使用唯一键，控制台中应该会出现警告。你有重复的 id 吗？还可以尝试将所有数据作为 props 传递，而不是设置状态，那么您根本不需要监听器。