React.js (useState ,useEffect) 调用setState("updated value")时出现死循环错误

Question

import React, {useState,useEffect} from 'react';
import ReactDOM from 'react-dom';
import reportWebVitals from './reportWebVitals';

function AppTwo(props){
    const [state, setState] = React.useState("initial value");
    useEffect(() => {
      console.log(`useEffect: ${state}`);
    },[state]);
    
    setState("updated value");
    
    console.log(state);
    return `<h1>${state}</h1>`;
}

ReactDOM.render(
    <>
        <AppTwo />
    </>,
  document.getElementById('root')
);

错误：重新呈现太多。 React 限制渲染次数以防止无限循环。

Answer 1

不要在组件主体内部调用 setState。每次组件重新渲染时它都会更新。这就是为什么你会得到状态更新的无限循环。

Answer 2

成功了！

import React, {useState,useEffect} from 'react';
import ReactDOM from 'react-dom';
import reportWebVitals from './reportWebVitals';

function AppTwo(props){
    const [state, setState] = React.useState("initial value");
    useEffect(() => {
      console.log(`useEffect: ${state}`);
    //   document.getElementById('btn').innerHTML = `<h1>State: ${state}</h1>`;
    },[state]);
    
    console.log(state);
    return (
    <>
        <h1>State: {state}</h1>
        <button id="btn" onClick={() => {setState('updated value')}}>
        click
        </button>
    </>
    )
}

ReactDOM.render(
    <>
        <AppTwo />
    </>,
  document.getElementById('root')
);

React.js (useState ,useEffect) 调用setState("updated value")时出现死循环错误

React.js (useState ,useEffect) infinite loop error when setState("updated value") is called

javascript

reactjs

use-effect

use-state