Question

我会试着描述一下我的情况。我有一个组件，其中state是一个对象数组，组件根据这些对象呈现另一个组件。所以我们有这样的东西：

class MainComponent extends React.Component {
  render(){
    return this.state.items.map((item) => {
      return <AnotherComponent {...item} />)
    }
  }
}

因此，如果州内有3个项目，结果将如下：

<MainComponent>
  <AnotherComponent item1 />
  <AnotherComponent item2 />
  <AnotherComponent item3 />
</MainComponent>

现在让我们对国家进行一些操纵。如果我们从状态中删除最后一个元素，组件将被重新呈现为：

<MainComponent>
  <AnotherComponent item1 /> // nothing happens to this one
  <AnotherComponent item2 /> // and to this one
                       // this element is deleted
</MainComponent>

但是如果我们从状态中删除第一个元素，组件将被重新渲染为：

<MainComponent>
  <AnotherComponent item2 />
  <AnotherComponent item3 />
</MainComponent>

在这种情况下， item2 实际上并不是 item2 组件。使用 item2 道具重新呈现 item1 。这种行为会弄乱我的应用程序的逻辑。有什么方法可以避免这种行为吗？因为 AnotherComponent 的主要逻辑是在componentDidMount方法中，所以组件并没有真正更新我需要的方式。您可以想象某种聊天应用程序，其中 AnotherComponent 组件是聊天室。当componentDidMount方法执行时，它连接到远程服务器以获取新消息。因为这个逻辑只执行一次，当应用程序状态改变时，如我在状态操作的最后一个例子中描述的那样（当你从状态中删除item1聊天室并在应用程序中打开item2时），你实际上看到了item1聊天室，你刚刚关闭。（这与我现在面临的问题非常相似）

希望你明白我写的是什么。谢谢。

Answer 1

您可以使用关键动态项目。

class MainComponent extends React.Component {
  render(){
    return this.state.items.map((item) => {
      return <AnotherComponent key={item.id} {...item} />)
    }
  }
}

在这种情况下，我认为该项目具有区分每个对象的ID

当React协调键控子项时，它将确保任何具有键的子项将被重新排序（而不是被破坏）或被销毁（而不是重用）。

密钥应始终直接提供给数组中的组件，而不是数组中每个组件的容器HTML子代。

参考：Dynamic Children

删除组件而不是更新它

1 个答案: