React控制元素显隐时触发Too many re-renders错误求助

问题根源 #

你直接在JSX的渲染逻辑中调用了状态更新函数setShow(!show)，这会导致每次组件渲染时都会执行这段代码。只要输入框为空的条件成立，就会触发状态更新，而状态更新又会强制组件重新渲染，如此反复形成无限循环，最终触发React的重渲染限制报错。

修复方案 #

方案1：直接通过输入状态控制显隐（推荐，无需额外state）

按钮的显隐完全依赖输入框的填充状态，没必要单独维护show状态，直接在渲染时计算显示逻辑即可：

<div 
  className={`${handles.saveButtonOne}`} 
  style={{ 
    display: (name === "" || lastName === "" || birthday === "" || number === "") 
      ? 'none' 
      : 'block' 
  }} 
  onClick={submitData}
>
  SAVE ACCOUNT
</div>

方案2：用useEffect监听输入变化更新状态（适合需复用show状态的场景）

如果后续有其他逻辑依赖show状态，可通过useEffect监听输入变量的变化，仅在输入改变时更新状态：

const [show, setShow] = useState(false);

// 仅当输入变量变化时，更新按钮显隐状态
useEffect(() => {
  // 所有输入不为空时显示按钮，否则隐藏
  setShow(!(name === "" || lastName === "" || birthday === "" || number === ""));
}, [name, lastName, birthday, number]); // 依赖项数组：只有这些变量变化时才执行回调

// 渲染按钮
<div 
  className={`${handles.saveButtonOne}`} 
  style={{ display: show ? 'block' : 'none' }} 
  onClick={submitData}
>
  SAVE ACCOUNT
</div>

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