时间戳

首页 > 解决方案 > 嵌套组件列表未正确更新

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

问题描述

我有一个递归定义的组件树，它是这样的：

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>
   )
 }

}

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

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

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

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

尽管存在一些不良的 UI 滞后。我的想法是，可能与导致此问题的基于密钥的缓存有关。

我究竟做错了什么？

标签： javascriptreactjs

解决方案

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

推荐阅读