Проблема с обработкой ошибок выборки в Reactjs

#javascript #reactjs #error-handling #fetch

#javascript #reactjs #обработка ошибок #выборка

Вопрос:

Я изучаю, как использовать выборку, и пробовал следующий синтаксис:

 const [stuff, setStuff] = useState([]);
const request = "link-to-API";

const data = await fetch(request)
    .then(response => response.json())
    .catch(err => {
      console.log(err);
      return {} //(or [], or an empty return, or any return at all)
    })

setStuff(data.hits)

Затем, в возврате, у меня есть:

 {stuff.map((element) => (
        <Thing
          title={element.label}
          link={element.url}
        />
      ))}

Думая, что я мог бы просто отображать пустой объект всякий раз, когда моя выборка завершается неудачно. За исключением того, что это работает только тогда, когда работает сама выборка. Реакция выдает мне ошибку

«Объекты недопустимы как дочерние элементы React (найдено: ошибка типа: не удалось выполнить выборку)».

Но я не могу найти никакого решения в Интернете. Как я мог обрабатывать ошибки, просто ничего не отображая? (это не единственная часть, которую я рендерю, я просто хочу отобразить пустой div, а не условно отображать эту часть)

Ответ №1:

при использовании await вы не можете использовать then catch методы и

Важно, чтобы вы использовали await async функцию in

 let data = null
try{
    const response = await fetch(request)
    data = response.json();
} catch(err)  {
      console.log(err);
    }

1. поскольку это функциональный компонент, у вас не может быть случайного оператора retrun, который ничего не возвращает. возврат приведет к «Ошибка: приложение (…): из рендеринга ничего не было возвращено. Обычно это означает, что оператор return отсутствует. Или, чтобы ничего не отображать, верните null. »

Ответ №2:

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

 const [stuff, setStuff] = useState([]);
const request = "link-to-API";
    
useEffect( ()=> {
    fetch(request)
    .then(response => response.json())
    .then(data => setStuff(data.hits))
    .catch(err => {console.log(err)})
},[])