反应 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'});
}, [])

Answer 2

问题是您使用 updateState({...state, name: 'something'}); 更新每个渲染的状态，然后触发新的渲染等。

如果您希望状态包含多个变量，您有两个主要选择。

使用多个 useState 钩子：

export default function App() {

    const [dishes, setDishes] = useState(DISHES)
    const [name, setName] = useState('something')

    return <div></div>
}

或者，由于您使用的是当前状态的对象，您可以添加更多属性：

export default function App() {

    const [state, updateState] = useState({
        dishes: DISHES,
        name: 'something'
    });

    return <div></div>
}

第二种方法可行，但是React 不会在对象状态之间进行深度比较，因此使用第一种方法通常更有效。