Реагируйте на обновление переменной состояния с помощью данных JSON

#javascript #reactjs #react-hooks #fetch

#javascript #reactjs #реагирует на перехваты #fetch-api

Вопрос:

App.js:

 function App() {
  const [items, setItems] = useState([]);
  useEffect(() => {
    const searchDB = () => {
      fetch("http://127.0.0.1:8443/subColumns/5/?key=fc257229-8f91-4920-b71f-885403114b35", {
        mode: 'cors',
        credentials: 'include'
      })
        .then(res => res.json())
        .then((json) => {
          setItems(json);
        })
  console.log({items});
    }
    searchDB();
  }, [])
 

Мне нужно сохранить ответ json в переменной состояния, потому что в будущем запрос API не будет жестко запрограммирован, и я ожидаю, что пользователь будет выполнять несколько запросов API без обновления, и результаты должны быть сопоставлены с разными компонентами. На данный момент попытка вывести {items} на консоль возвращает пустой массив.

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

1. Это происходит потому, что вы регистрируетесь в консоли до того, как получите ответ

Ответ №1:

Поскольку setItems это асинхронный метод, вы не можете получить обновленное значение сразу после setItems. Вы должны использовать другую useEffect с зависимостью, чтобы увидеть значение.

 useEffect(() => {
  console.log(items);
}, [items]);