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

}

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

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

有趣的是，如果我使用随机密钥作为列表项，一切都很完美：

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

虽然存在一些不合需要的UI延迟。我的想法是，可能与导致此问题的基于密钥的缓存有关。

我做错了什么？

Answer 1

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

嵌套组件列表无法正确更新

1 个答案: