Reactjs 产生无限循环的状态 从'reactstrap'导入{Navbar，navbarrand}； //从“/components/MenuComponent”导入菜单； 从“/shared/disks”导入{disks}； 导出默认函数App（）{ const[state，updateState]=useState({ 菜品：菜品 }); updateState（{…state，名称：'something'}）； console.log（状态）； 返回( Ristorante Con Fusion {/**/} ); }

这导致了一个无限循环。在对UpdateEstate行进行注释后，它可以正常工作。所谓功，我的意思是它不会进入无限循环。有人能告诉我我做错了什么吗

截图附在下面-

---

问题在这里

updateState（{…state，name:'something'}）

，您正在更新状态，甚至在它渲染之前，它会继续更新状态，然后重新渲染。使用

useffect

更新状态

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（{…state，name:'something'}）

，您正在更新状态，甚至在它渲染之前，它会继续更新状态，然后重新渲染。使用

useffect

更新状态

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（{…state，name:'something'}）更新每个渲染上的状态，然后触发新渲染等

如果希望状态包含多个变量，则有两个主要选项

使用多个
useState
挂钩：

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

导出默认函数App（）{
常数[碟形物，设置碟形物]=使用状态（碟形物）
const[name，setName]=useState（'something'）
返回
}

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

export default function App() {

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

    return <div></div>
}

导出默认函数App（）{
const[state，updateState]=useState({
菜：菜，
名字：“某物”
});
返回
}

第二种方法可以工作，但React不会对对象状态进行深入比较，因此通常使用第一种方法更有效。
问题是，您正在使用
updateState（{…state，name:'something'）更新每个渲染的状态，然后触发新渲染等

如果希望状态包含多个变量，则有两个主要选项

使用多个
useState
挂钩：

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

导出默认函数App（）{
常数[碟形物，设置碟形物]=使用状态（碟形物）
const[name，setName]=useState（'something'）
返回
}

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

export default function App() {

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

    return <div></div>
}

导出默认函数App（）{
const[state，updateState]=useState({
菜：菜，
名字：“某物”
});
返回
}

第二种方法可以工作，但React不会在对象状态之间进行深入比较，因此通常使用第一种方法更有效。
您在每个渲染上运行
updateState
，这会改变状态并触发新渲染。该行的目标是什么？如果我想向状态添加更多内容，该怎么办？您正在每个渲染上运行
updateState
，这会改变状态并触发新渲染。这条线的目标是什么？如果我想给国家增加更多东西，该怎么办？