【问题标题】：Weird re-render behavior with react material-ui dialog使用 react material-ui 对话框进行奇怪的重新渲染行为
【发布时间】：2021-01-03 15:43:50
【问题描述】：

背景

因此，我基于 React 和 Material UI 构建了一个交付服务的前端项目。我被要求使用单击项目时将打开的对话框窗口，用户将有机会自定义项目。可以在这里看到对话框（非常简单：项目照片、名称、描述和自定义选项）：

https://ibb.co/GFkpy8Q

（抱歉像素化）

问题

我在这个项目中使用了反应钩子，这就是为什么要管理对话框的状态。虽然很简单，但我偶然发现了一些关于元素如何重新渲染/不重新渲染（在预期时）的问题：

checkboxes的"checked" prop使用Array.some，查看checkbox的唯一ID是否在state数组中。单击复选框时，未将复选框设置为选中状态。 onChange 属性只是将复选框的值推送到状态数组并设置状态：

const [array, setArray] = React.useState([]);
...
<Checkbox
  checked={
    array.some(
      item => item._id === subOption._id
    )
  }
  onChange={() => setArray(array.push(subOption))}
/>

onChange 动作正常工作，那么为什么"checked" 属性不能正常工作呢？

当一个复选框被选中时，我想在它旁边添加一个小数量的字段，这样用户就可以选择他应该收到的subOption的数量。所以我使用了下一个成熟的模式：

{array.some(item => item._id === subOption._id) &&
  (
    <QuantityField />
  )
}

问题是勾选复选框后 QuantityField 不显示。

退出Dialog再进入，突然看到checked checkbox被勾选了，旁边显示QuantityField？？？？
如果我使用对话框图像左下方的一般 QuantityField 更改项目的数量，突然所有选中的复选框都未选中 ???? 一般的 QuantityField 使用它自己的状态，并且不连接到任何复选框。

从我在尝试调试奇怪的行为后看到的情况来看，我可以说 Dialog 组件的渲染操作没有按预期工作。状态已更新，但不会触发对话框树的重新渲染。实际上，这样说是错误的，因为 Dialog 树被重新渲染，但“checked”道具在重新渲染期间没有被重新检查；但是完全卸载并重新安装 Dialog 会使树向右摇晃。

希望得到一个有趣的答案。谢谢。

【问题讨论】：

标签： javascript reactjs material-ui react-hooks rendering

【解决方案1】：

我会改变你使用setArray 的方式。参见Array.prototype.push()文档：

push() 方法将一个或多个元素添加到数组的末尾，并返回数组的新长度。

同样不允许在状态上使用.push()，因为永远不应该直接改变状态。

建议的解决方案：

onChange={() => setArray(prevState => [...prevState, subOption])}

【讨论】：