от
Я работаю над проектом, где я извлечения некоторых данных из API и хранить его как JSON-объект в состояние крюка. Однако, когда инициализируется с
const [data, setData] = useState([])
, очевидно,
data
хранит начальное значение
[]
до fetchAPI проходит в правильные значения, который вызывает всякие проблемы на функциональность, потому что мои функции не могут работать на пустые объекты. Я пробовал методы сна, асинхронный/ждут функций, но все сводится к тому, что для инициализации этого государства. Компоненты выглядят так:
// fetchHook.js

import React, { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  async function fetchUrl() {
    const response = await fetch(url);
    const json = await response.json();
    setData(json);
    setLoading(false);
  }

  useEffect(() => {
    fetchUrl();
  }, []);

  return [data, loading];
}

export { useFetch };
и он импортирован на основной компонент приложения, который затем передает
data
как пользователей на другой компонент, например:
// App.js
import { useFetch } from "./components/fetchHook";


function App() {
  const [users, loading] = useFetch("https://api.github.com/users");

  return (
    
      
    
  );
}
Как я могу убедиться в том, что извлечение метод всегда возвращает корректные данные, прежде чем вернуться в исходное состояние?

Пожалуйста, войдите или зарегистрируйтесь для публикации ответа на этот вопрос.

1 Ответ

0 голосов
от
Типовое решение для проверки
error
и
loading
и оказывать соответствующую:
  render() {
    return (
      loading ?
...