react useState 导致无限循环

IT技术 reactjs
2021-04-25 03:03:23 
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 行发表评论后，它可以工作。通过作品，我的意思是它不会进入无限循环。有人可以告诉我我做错了什么吗？

下面附上截图——

在此处输入图片说明

2个回答

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

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

问题是您正在使用 更新每个渲染的状态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 不会在对象状态之间进行深度比较，因此通常使用第一种方法更有效。

其它你可能感兴趣的问题
上一篇Ender 3 pro 挤出机跳过步骤，尝试了多种方法 下一篇全金属热端 Creality Ender 3 Pro 干扰问题