React数组状态添加值时触发无限重渲染错误排查

错误原因 #

你直接在JSX渲染逻辑里调用了SelectorAdd('text value')，这会导致每次组件渲染时都会执行这个状态更新函数。而React中调用setSelectors会触发组件重新渲染，这样就形成了死循环：渲染→触发状态更新→重新渲染→再次触发状态更新……直到React拦截这个无限循环抛出Too many re-renders错误。

解决方案 #

1. 仅当Yes状态变为true时添加值 #

如果需要在Yes的状态切换为true时执行一次添加操作，用useEffect监听Yes的变化：

import { useState, useEffect } from 'react';

function YourComponent() {
  const [Selectors, setSelectors] = useState([]);
  const [Yes, setYes] = useState(false); // 假设Yes是组件内部状态

  useEffect(() => {
    // 当Yes为true时，向数组添加值
    if (Yes) {
      setSelectors(prevArray => [...prevArray, 'text value']);
    }
  }, [Yes]); // 仅在Yes的值变化时执行该副作用

  return (
    <>
      {Yes ? <AnyComponent /> : null}
    </>
  );
}

2. 在用户交互时根据条件添加值 #

如果是需要在用户操作（比如点击按钮）时根据Yes的条件添加值，把状态更新放在事件处理函数中：

function YourComponent() {
  const [Selectors, setSelectors] = useState([]);
  const [Yes, setYes] = useState(false);

  const handleAddValue = () => {
    if (Yes) {
      setSelectors(prevArray => [...prevArray, 'text value']);
    }
  };

  return (
    <>
      {Yes ? <AnyComponent /> : null}
      <button onClick={handleAddValue}>添加指定值</button>
    </>
  );
}

关键提醒 #

永远不要在JSX的直接渲染输出中调用状态更新函数（比如setState类的方法），这类操作应该放在：

• 副作用钩子（如useEffect）中，用于响应状态/属性变化
• 事件处理器中，用于响应用户交互（点击、输入等）
• 其他仅在特定时机触发的逻辑中

内容的提问来源于stack exchange，提问作者s.kuznetsov