React useState Hook调用setState触发无限重渲染错误排查

你直接在组件函数的顶层调用了update_state()，组件每次渲染时都会执行这段代码。而setStatus(1)会触发组件重新渲染，新的渲染又会再次调用update_state()，再次触发状态更新，这样就形成了无限渲染循环，React为了避免应用崩溃，就抛出了「Too many re-renders」的错误。

解决方案1：用useEffect执行初始化更新 #

如果只是想在组件首次渲染时将status设为1，可以使用useEffect并传入空依赖数组，这样逻辑只会在组件挂载时执行一次：

import React from 'react'
import ReactDOM from 'react-dom/client'
import { useState, useEffect } from 'react'

function MyComponent(){
  const [status,setStatus] = useState(0);

  useEffect(() => {
    setStatus(1);
  }, []); // 空依赖数组表示仅在组件挂载时执行

  return(
    <div>
      <h1 id='hello'>{status}</h1>
    </div>
  );
}
const body = ReactDOM.createRoot(document.getElementById("body"));
body.render(<MyComponent/>);

解决方案2：把更新逻辑绑定到用户事件 #

如果需要用户操作（比如点击按钮）才触发状态更新，就把update_state绑定到事件处理上：

import React from 'react'
import ReactDOM from 'react-dom/client'
import { useState } from 'react'

function MyComponent(){
  const [status,setStatus] = useState(0);

  function update_state(){
    setStatus(1);
  }

  return(
    <div>
      <h1 id='hello'>{status}</h1>
      <button onClick={update_state}>更新状态</button>
    </div>
  );
}
const body = ReactDOM.createRoot(document.getElementById("body"));
body.render(<MyComponent/>);

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