Состояние использования не обновляется

#reactjs #react-hooks #axios #use-state

Вопрос:

Довольно ново реагировать на крючки, и я сталкиваюсь с проблемой со сторонним api. Я получаю данные, но это хук useState, который не обновляет значение моего состояния. Я почти уверен, что в этом проблема, но я получаю сообщение об ошибке, что items.map не является функцией. Это делает это до н. э. в предметах ничего нет??? Кто-нибудь знает, как с этим справиться?

 import React, { useState, useEffect} from "react"; import axios from "axios";  const FeaturedWorks = () =gt; {  const [items, setItems] = useState([]);  const fetchRandomData = async () =gt; {  try {  const res = await axios(  `https://www.rijksmuseum.nl/api/en/collection?key=XXXXXXX`  );  setItems(res.data.artObjects);  console.log(res);  console.log(items);  } catch (error) {  console.log(error);  }  };   useEffect(() =gt; {  fetchRandomData();  },[]);   return (  lt;div className="featured-container"gt;  {items.map((item, idX) =gt; (  lt;h5 key={idX}gt;{item.title}lt;/h5gt;  ))}    lt;/divgt;  ); };  export default FeaturedWorks;

Вот скриншот моего ответа:

1. вы уверены, что данные, возвращенные вашим вызовом API, являются допустимыми и представляют собой массив?

2. вам также необходимо добавить образец ответа api в свой вопрос. В этом что-то не так, все остальное кажется хорошим, и вам нужно переключиться {item} на что-то другое, например test , для целей тестирования в вашем h5 .

3. Хорошо, я добавил свой ответ api, если это поможет.

Ответ №1:

Поскольку вы передаете [] в качестве начального состояния для items , это уже (пустой) массив при первом рендеринге. Если items не обновляется, items.map все равно будет работать, так .map как все еще существует для пустого массива.

Итак, я предполагаю, что вы setItems действительно обновляете состояние с помощью результата вашего запроса, но res.data это не массив. Если res.data есть и объект , подобный { values: ['foo', 'bar'] } , вместо массива, подобного ['foo', 'bar'] , то items будет установлен этот объект и items.map() фактически выдаст ошибку, так как объект должен быть массивом для .map определяемой функции.

Вы console.log(res.data); действительно регистрируете массив или он регистрирует что-то другое?

1. Так что вы правы, это объект. В res.data есть artObjects, который выглядит как массив с объектами.

2. Верно. Так что , если вы используете setItems с res.data.artObjects , а не просто res.data , вы items.map должны снова работать, верно? Однако, если artObjects это массив объектов, вы можете столкнуться с другой проблемой. В item качестве дочерних элементов для ваших lt;h5gt; тегов будут указаны объекты, которые могут вызвать ошибку Objects are not valid as a React child . Может быть, в этих объектах есть какое-то примитивное свойство, которое вы собираетесь использовать в качестве содержимого lt;h5gt; вместо всего объекта? Например, если есть id свойство, вы могли бы заставить его работать с lt;h5 key={idX}gt;{item.id}lt;/h5gt;

3. Он все еще возвращается в виде пустого массива. Если я утешу. войдите в журнал, он показывает все данные, но если я регистрирую «элементы», это пустой массив. Однако, если я что-нибудь изменю в файле, он зарегистрирует правильные данные. Я думаю, что это что-то в функции setItems.

4. Поэтому я, возможно, отвечаю здесь на свой собственный вопрос, но я передал {элементы} другому компоненту через реквизит, и теперь он работает. Вы знаете, почему это могло бы быть?