ReactJS：即使在重新渲染组件后复​​选框状态仍然存在

Posted 2023-03-05

【中文标题】ReactJS：即使在重新渲染组件后复​​选框状态仍然存在

【英文标题】：ReactJS: checkbox state persists even after re-rendering of Component

【发布时间】：2017-01-16 11:28:42

【问题描述】：

我创建了一个JSfiddle

在这个小提琴中，最初根据传递给组件的props 呈现一个复选框列表。 单击Re-render 按钮时，相同的组件会以不同的props 集呈现。

现在，请按照以下步骤操作-

加载jsfiddle 选中任何一个复选框（假设我选中了第二个和第三个复选框） 点击Re-render按钮

即使在使用新的props 渲染组件后，您选中的复选框的状态仍然保持不变（仍然选中第 2 和第 3）

为什么会这样？ 如何使用新的道具集重新渲染组件，以使复选框的状态不会持续存在。

【问题讨论】：

leo 已经回答了你的问题，但我鼓励你以反应哲学去研究这个例子 - 尝试将复选框重构为一个单独的组件，然后使用 this.setState 管理 checked 属性。使用 if 语句有效但没有反应。举个例子：jsfiddle.net/jwm6k66c/1034

感谢@erik-sn 的提琴，我会采用这种方法。

【参考方案1】：

因为 React 的 diff algorithm 很聪明。重新渲染新组件的条件是：

组件有不同的键

（不同的键）

或者它实际上是一个不同的 html 元素

（不同的节点类型）

这是一个工作示例：http://jsfiddle.net/lustoykov/ufLyy3vh/

问题是 - 不满足任何条件来重新渲染你的 input 元素不满足，所以 React 真的重用了旧的 input。我所做的是在每次重新渲染时为每个input 元素生成一个新的key。 React 假定这是一个新元素，因为 key 发生了变化，并且 input 被重新渲染为正确的 value。

---

Math.random() 是必要的，以确保您生成不同的密钥，就像：嘿，React，此元素已更改 - 请重新渲染它。

但是，我会反对这种方法 使用不同的键，因为它违背了 React 的哲学。如果每次都重新渲染相同的元素，为什么还要使用 React？这就是 React 的核心——当组件相同时不重新渲染。 相反，您应该使用 onChange 处理程序仅更新输入的值，而无需显式地重新渲染整个输入组件。

看看如何使用 React forms。

【讨论】：

正确，Math.random() 不是必需的吗？

为什么不呢？值总是一样的，不要随机尝试；-)

此示例中的对象之间的值正在发生变化 - 但您可能还有另一个示例，其中两个复选框具有相同的值/标签，并且没有 Math.random()，它们不会更新。

确实如此，Math.random() 确实解决了这个问题。忽略我的评论:)

@leo 感谢您的详细解释！ :) 是的，我会避免重新渲染组件，而是遵循 erik-sn 建议的方法（评论我的问题）