React useState - как привести массив объектов в состояние

Question

У меня есть приложение React, которое я извлекаю данные из RESTful API. Данные в ответе - это массив объектов. Я пытаюсь получить эту информацию и сохранить ее в состоянии React с помощью useState, а затем отобразить ее в виде списка на странице.

Я подделал API по ссылке ниже, назначив некоторый фиктивный массив объектов для book, а затем попытался установить его как состояние, но оно не работает. Любые идеи, как передать его в состояние, а затем отобразить его на странице?

https://codesandbox.io/s/adoring-sunset-1ejxi

Answer 1

Не передавайте books в качестве аргумента в useEffect обратном вызове. Вам нужно справочники из-за пределов видимости

  useEffect(() => {
     setBookList(books);
  }, []);

В этом случае он будет ссылаться на books в теле компонента.

  useEffect(() => {
     fetch('some_url).then(res => res.json()).then(books => setBookList(books)); 
  }, []);