没有初始状态的 React 钩子

Question

I am working on a project where I am fetching some data from an API and storing it as a JSON object in a state hook. However, when initialised with const [data, setData] = useState([]) , obviously, data stores an initial value of [] before fetchAPI passes in the correct values, which is causing all sorts of problems on the functionality because my functions cannot work on empty objects.

I have tried sleep methods, async/await functions but it all comes down to me having to initialise that state. Components look like this:

// 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 };

and it is imported on main App component which then passes the data as users to another component like so:

// App.js
import { useFetch } from "./components/fetchHook";


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

  return (
    <div className="App">
      <Profiles users={users} count={count} />
    </div>
  );
}

How can I make sure that fetch method always returns valid data before returning the initial state?

Answer 1

Typical solution is to check error and loading and render appropriate:

  render() {
    return (
      loading ? <Loading/> :
      <div className="App">
        <Profiles users={users} count={count} />
      </div>
    )
  )

API typically return both error and loading status. For example design of apollo return object with fields included names error and loading

But in projects we can simplify as we like. For example we can return status field where both error an loading is packed:

  const [users, status] = useFetch("https://api.github.com/users");
  return status ? <Loading {...{status}}/> :
    <div className="App">
      <Profiles users={users} count={count} />
    </div>

Pretty much ideas about API design you can found in this discussion