Question

我正在尝试使用render中的map函数来渲染组件列表。当我更改状态时，将按预期方式调用render函数，但我的组件未更新。我在这里做了一个示例代码和框

我在做什么错？我添加了一些控制台日志，看起来应该显示机密内容，但不能显示

Answer 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变量。

Answer 2

我还没有使用React Hook的经验，但是我试图了解发生了什么。您引用的变量项既不是属性，也不是组件的状态，我将使组件处于有状态并在该状态下初始化项。

也许有更好的方法可以使用其他人可以提供的react钩子

反应动态渲染的组件不更新

2 个答案: