reactjs - React useState 导致无限循环

Question

import {Navbar, NavbarBrand} from 'reactstrap';
// import Menu from './components/MenuComponent';
import {DISHES} from "./shared/dishes";

export default function App() {

    const [state, updateState] = useState({
        dishes: DISHES
    });
    updateState({...state, name: 'something'});
    console.log(state);
    return (
        <div>
            <Navbar dark color="primary">
                <div className="container">
                    <NavbarBrand href="/">Ristorante Con Fusion</NavbarBrand>
                </div>
            </Navbar>
            {/*<Menu dishes={state.dishes}/>*/}
        </div>
    );
}

这会导致无限循环。在评论 updateState 行后它起作用了。通过作品，我的意思是它不会进入无限循环。有人可以告诉我我做错了什么吗？

下面附上截图-

Answer 1

问题在这里 updateState({...state, name: 'something'}) ，你在渲染之前更新状态并且继续更新状态，这将重新-渲染，它继续。使用 useEffect 更新状态。

useEffect(() => {
  updateState({...state, name: 'something'});
}, [])