反应动态呈现的组件不更新答案

【问题标题】：React dynamically rendered component not updating反应动态呈现的组件不更新
【发布时间】：2019-01-15 18:26:26
【问题描述】：

我正在尝试使用渲染中的映射函数来渲染组件列表。当我更改状态时，渲染函数按预期调用，但我的组件没有更新。我在这里做了一个示例代码框

我做错了什么？我添加了一些控制台日志，看起来应该显示秘密内容，但实际上没有

【问题讨论】：

【解决方案1】：

一旦您的项目被推入items 数组，它将永远不会更新。对此的解决方案是将您推送的项目转换为箭头函数，该函数将获得show 参数：

items.push(show => 
    <div>
      {show && <div>I'm secret</div>}
      My content
      <br />
      <input
        type="button"
        onClick={showSecret}
        value="Show secret content"
      />
    </div>
  );

然后在你的渲染映射中调用它：

return <div key={index}>{item(show)}</div>;

但是，使用此解决方案，单击一个按钮将导致每个项目显示其秘密元素，如果这不是您期望的行为并且希望每个项目独立运行，我建议为每个项目创建一个挂钩.而且他们将自己的show 变量存储在他们的状态中。

【讨论】：

我明白你的所作所为。我不明白为什么我的例子不起作用。您可以看到“显示”状态已经改变并且触发了重新渲染......我是否需要将项目视为容器的子项并且我需要将道具传递给它？但是为什么 showSecret 函数会起作用呢？它是否创建了一个闭包并在第一次渲染时捕获了状态？
好吧，当您调用push 时，您的项目将根据show 的当前值创建。由于您从未重建此数组中的项目，因此它们不会得到更新。另外，是的，我建议将项目视为子组件，以将它们的行为与其父组件隔离

【解决方案2】：

我还没有反应钩子的经验，但我试图了解发生了什么。您引用的变量 items 既不是道具也不是组件的状态，我会让组件有状态并初始化状态中的项目。

也许有其他人可以提供的更好的反应钩子方法

【讨论】：

我已经更新了我的示例。我在渲染中使用了状态...这是一个错字