state 上的组件重新渲染未发生更改

Question

我有一个类似于此代码框链接https://codesandbox.io/s/eatery-v1691中显示的反应应用程序

单击页面底部中心的Menu会呈现MenuFilter组件。

MenuFilter组件又使用一个checkbox组件来呈现多个复选框，这些复选框的选中状态取决于我在app.tsx中传递给MenuFilter的selectedMeals道具。

我读到，当 state 作为道具传递时，一旦 state 发生变化，就会重新渲染，但这并没有发生。

selectedMeals state 使用 allItems 初始化，然后进行管理，以便在单击任何其他项目时，设置该项目和 allItems，并且这些单独的项目可以同时有多个。 state 管理工作正常，但复选框未根据状态更新！

但是，如果您单击cancel （确定按钮尚未执行任何操作），然后再次单击Menu按钮，则仅呈现 selectedMeals 道具中的值。

请参阅此处的视频（ https://youtu.be/Zmfc0MQGaIU这是完整的应用程序，codesandbox 应用程序是对此的表示，但不相同）其中 state 更改（所有项目被删除，当所有项目被检查时，其他项目被删除）有效完美，但复选框未正确重新渲染

我做错了什么，更重要的是如何获得我想要的结果？

我最初将问题放在这里，一旦 state 发生更改，但没有沙箱，并且由于沙箱与我在该问题中提出的不同，我创建了一个新问题。 谢谢。

在这个视频https://youtu.be/2v3lOPaIPzU我已经在控制台日志中捕获了selectedMeals的变化，并且我还展示了复选框如何与selectedMeals不匹配。

Answer 1

问题出在Checkbox组件中。

const [checked, setChecked] = useState(isChecked);

isChecked只会被用作初始值， checked不会在每次isChecked更改时更新。 您可以使用isChecked作为依赖项手动更新useEffect挂钩中的checked ，但这是不必要的，因为Checkbox组件可以在没有任何 state 的情况下实现。

但是，如果您单击取消（确定按钮尚未执行任何操作），然后再次单击菜单按钮，则仅呈现 selectedMeals 道具中的值。

这是因为模式是基于menuModalIsShown有条件地呈现的，并且当此 boolean 被切换时，组件卸载并重新安装，导致useState(isChecked)使用更新的 state。

---

更新Checkbox ：

export const CheckBox = ({
  standAlone,
  text,
  onCheck,
  isChecked,
  value
}:
CheckBoxProps) => {
  return (
    <div
      className={`${styles.checkbox} ${
        standAlone ? "" : styles.notStandAlone
      } `}
    >
      <input
        type="checkbox"
        checked={isChecked}
        onChange={onCheck}
        value={value}
      />
      <label htmlFor={styles.checkbox}>{text}</label>
    </div>
  );
};