时间戳

首页 > 解决方案 > 使用 react material-ui 对话框进行奇怪的重新渲染行为

javascript - 使用 react material-ui 对话框进行奇怪的重新渲染行为

问题描述

背景

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

https://ibb.co/GFkpy8Q

（抱歉像素化）

问题

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

  1. checkboxes的"checked"prop 使用Array.some, 来查看 checkbox 的唯一 ID 是否在 state Array 中。单击复选框时，复选框未设置为选中状态。该onChange道具只是将复选框的值推送到状态数组并设置状态：
const [array, setArray] = React.useState([]);
...
<Checkbox
  checked={
    array.some(
      item => item._id === subOption._id
    )
  }
  onChange={() => setArray(array.push(subOption))}
/>

onChange动作正常，为什么"checked"道具不能正常工作？

  1. 当一个复选框被选中时，我想在它旁边添加一个小数量字段，这样用户就可以选择subOption他将收到的数量。所以我使用了下一个实践良好的模式：
{array.some(item => item._id === subOption._id) &&
  (
    <QuantityField />
  )
}

问题是选中复选框后未显示 QuantityField。

  1. 如果我退出Dialog再进入，突然看到checked checkbox被勾选了，旁边显示了QuantityField

  2. 如果我使用通用 QuantityField 更改项目的数量，您可以在对话框图像的左下方看到，突然所有选中的复选框都未选中通用 QuantityField 使用它自己的状态，并且未连接到任何复选框。

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

希望有一个有趣的答案。谢谢你。

标签： javascriptreactjsmaterial-uireact-hooksrendering

解决方案

我会改变你的使用方式setArray。从Array.prototype.push()文档中查看：

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

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

建议的解决方案：

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

推荐阅读