React设置state触发Too many re-renders无限重渲染报错如何解决

你将状态更新逻辑直接写在了组件函数的顶层作用域，触发了无限重渲染死循环：

1. 组件渲染时执行顶层代码，判断location.state !== null成立，调用setcompanyOneAlready更新状态
2. 状态更新会触发组件重新渲染
3. 重渲染时再次执行顶层判断，location.state未发生变化，判断依然成立，再次触发状态更新
4. 上述流程无限循环，React检测到渲染次数异常后直接抛出"Too many renders"错误。

另外你在setcompanyOneAlready调用后立刻打印companyOneAlready也拿不到更新后的值，React状态更新是异步批处理的，同步代码中状态变量不会立刻刷新。

根据你的业务场景选以下一种方案即可：

方案1：状态初始化时直接读取路由值（适合仅首次加载取路由参数的场景） #

不需要额外写判断触发setState，直接将路由传值作为状态的初始值，从根源避免额外渲染触发：

const location = useLocation();
// 用可选链+空值合并做兜底，避免空值读取报错
const [companyOneAlready, setcompanyOneAlready] = useState(
  location.state?.name?.companyName ?? ''
);

后续如果有业务场景需要手动更新这个状态，正常调用setcompanyOneAlready即可。

方案2：监听路由变化同步状态（适合路由参数会动态更新的场景） #

如果组件挂载后location.state可能发生变化，需要将状态同步逻辑放入useEffect副作用中，仅在依赖项变化时才执行更新，不会触发死循环：

const location = useLocation();
const [companyOneAlready, setcompanyOneAlready] = useState('');

useEffect(() => {
  if (location.state?.name?.companyName) {
    setcompanyOneAlready(location.state.name.companyName);
  }
// 仅当location.state变化时才执行副作用逻辑
}, [location.state]);

// 如果需要查看状态的最新值，同样放在useEffect中监听状态变化即可
useEffect(() => {
  console.log(companyOneAlready);
}, [companyOneAlready]);

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