Блог

Главная - Вопросы по программированию - Реагируйте на использование, вызывая бесконечный цикл

Реагируйте на использование, вызывая бесконечный цикл

#javascript

Вопрос:

 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 (  lt;divgt;  lt;Navbar dark color="primary"gt;  lt;div className="container"gt;  lt;NavbarBrand href="/"gt;Ristorante Con Fusionlt;/NavbarBrandgt;  lt;/divgt;  lt;/Navbargt;  {/*lt;Menu dishes={state.dishes}/gt;*/}  lt;/divgt;  ); }

Это вызывает бесконечный цикл. После комментария к строке updateState это работает. Под работой я подразумеваю, что она не переходит в Бесконечный цикл. Может кто-нибудь, пожалуйста, сказать мне, что я делаю не так?

Скриншот прилагается ниже —

введите описание изображения здесь

Комментарии:

1. Вы выполняете updateState каждый рендеринг, который изменяет состояние и запускает новый рендеринг. Какова цель этой линии?

2. что делать, если я хочу добавить больше вещей в штат?

Ответ №1:

Проблема в том updateState({...state, name: 'something'}) , что вы обновляете состояние до того, как оно будет отрисовано, и это продолжает обновлять состояние, которое будет повторно отрисовано, оно продолжается. Используется useEffect для обновления состояния.

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

Ответ №2:

Проблема в том , что вы обновляете состояние при каждом использовании рендеринга updateState({...state, name: 'something'}); , которое затем запускает новый рендеринг и т. Д. И т. Д.

Если вы хотите, чтобы состояние содержало несколько переменных, у вас есть два основных варианта.

Используйте несколько useState крючков:

 export default function App() {   const [dishes, setDishes] = useState(DISHES)  const [name, setName] = useState('something')   return lt;divgt;lt;/divgt; }

Или, поскольку вы используете объект для своего текущего состояния, вы можете просто добавить дополнительные свойства:

 export default function App() {   const [state, updateState] = useState({  dishes: DISHES,  name: 'something'  });   return lt;divgt;lt;/divgt; }

Этот второй метод будет работать, но React не будет проводить глубокого сравнения состояний объектов, поэтому, как правило, более эффективно использовать первый метод.

Метки: ,