#reactjs #api #state
Вопрос:
Данные получены успешно, но мое состояние не меняется.
Я инициализирую категории состояний как пустые [], затем я хочу установить их в соответствии с данными, которые я получил. Ответ в порядке, и я могу видеть данные в консоли.
Это объект с одной парой: категории:Массив(14), который я ищу.
const [categories,setCategories] = useState([]) useEffect(() =gt; { const fetchMeals = async () =gt; { const res = await fetch( "https://www.themealdb.com/api/json/v1/1/categories.php" ); const data = await res.json(); console.log(data.categories); /*array (14)*/ setCategories(data.categories.map((cat) =gt; cat.strCategory)); console.log(categories); /*empty array*/ }; fetchMeals(); },[]); Почему это не работает?
Комментарии:
1. Я не думаю, что набор работает мгновенно; категории будут установлены при следующем рендеринге. Если вы отображаете категории в своем компоненте, вы должны увидеть новое значение; ваш код выглядит правильно (хотя я бы добавил некоторую проверку ошибок для выборки).
2. Какова структура объектов внутри data.category ? Более того,
setCategoryявляется асинхронным, поэтому на данном этапе вы не видитеcategoryобновленного состояния. Поместите console.log(категории) за пределы эффекта использования.
Ответ №1:
setState является асинхронной операцией, подобной операции, поэтому вы никогда не увидите обновленное состояние синхронно (после вызова setState ). Вы можете сделать это альтернативно:
const updatedCategiories = data.categories.map((cat) =gt; cat.strCategory); setCategories(updatedCategiories); console.log(updatedCategiories);