我创建了一个 JSfiddle
在这个 fiddle 中，最初根据传递给组件的 props 呈现一个复选框列表。
单击 Re-render 按钮时，同一组件将使用一组不同的 props 进行渲染。
现在，请按照以下步骤-
- 加载 jsfiddle
- 选中任何一个复选框(假设我选中了第二个和第三个复选框)
- 点击
重新渲染按钮
即使在使用新的 props 渲染组件后，您选中的复选框的状态仍保持不变(第 2 个和第 3 个仍处于选中状态)
为什么会这样？ 我如何使用新的 Prop 集重新渲染组件，以便复选框的状态不会持续存在。
最佳答案
因为 React 的 diff algorithm 很聪明。重新渲染新组件的条件是:
- 组件有不同的 key (不同的 key )
- 或者它实际上是一个不同的 HTML 元素(不同的节点类型)
这是一个工作示例:http://jsfiddle.net/lustoykov/ufLyy3vh/
问题是 - 重新呈现您的 input 元素的条件都不满足，所以 React 真的重用了旧的 input。我所做的是在每次重新渲染时为每个 input 元素生成一个新的 key。 React 假设这是一个新元素，因为 key 发生了变化并且 input 被重新渲染为正确的 value。
为了确保生成不同的 key ，Math.random() 是必需的，就像:嘿，React，这个元素已经改变 - 请重新渲染它。
但是，我会反对这种使用不同键的方法，因为它违背了 React 的理念。如果你每次都重新渲染相同的元素，你为什么要使用 React？这就是 React 的核心——当组件相同时不重新渲染。 相反，您应该使用 onChange 处理程序仅更新输入的值，而无需显式重新呈现整个输入组件。
看看如何使用 React forms .
关于javascript - ReactJS:即使在重新渲染组件后复选框状态仍然存在，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39392493/