React中如何通过修改useState布尔值的函数控制模态框打开，解决过多重渲染报错

问题根因 #

你在组件渲染的顶层同步调用了feelingsFilled()，这个函数内部会执行setDisplayTraits修改状态，状态更新会触发组件重新渲染，重新渲染又会再次执行顶层的feelingsFilled()，由此进入「状态更新→重渲染→状态更新」的无限循环，所以React抛出了重渲染次数超限的报错。

解决方案 #

方案1：仅在依赖的daily对象变更时触发校验 #

如果你的校验逻辑只需要在daily数据变化的时候执行，把调用逻辑放到useEffect里，绑定daily为依赖项即可：

import { useState, useEffect } from 'react';

const [displayTraits, setDisplayTraits] = useState(false);

const feelingsFilled = () => {
  const keysToCheck = ["anxiety", "mood", "cognition"];
  function validate(obj) {
    try {
      const shouldShow = Object.keys(obj)
        .filter((key) => keysToCheck.includes(key))
        .every((key) => obj[key].counter > 0);
      setDisplayTraits(shouldShow);
    } catch (err) {
      console.log("error");
    }
  }
  validate(daily);
};

// 把调用放到useEffect里，仅daily变化时执行
useEffect(() => {
  feelingsFilled();
}, [daily]);

// 模态框绑定逻辑不变
<Modal isVisible={displayTraits} />

方案2：在用户交互后触发校验 #

如果你的校验逻辑是要在用户填写完对应选项、点击按钮等交互动作后触发，直接把feelingsFilled()绑定到对应的交互事件回调里即可，不要直接放在组件顶层调用：

// 示例：绑定到提交按钮的点击事件
<button onClick={feelingsFilled}>提交感受</button>

内容的提问来源于stack exchange，提问作者guitarman