我无法在 Hook 中保存数据

Question

我正在使用 React 学习 Hooks，我正在尝试对 API 进行简单的获取，然后我尝试将该数据保存在 Hook 中，但对我来说这是不可能的。

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

function useDogs() {
  const [dogs, setDogs] = useState({
    data: {}
  });

  useEffect(() => {
    const fectData = async () => {
      const data = await fetch("https://dog.ceo/api/breeds/image/random");
      setDogs({ data: data.url });
      console.log(data.url);
    };
    fectData();
  }, []);
}

function Dogs() {
  const dogs = useDogs();
  console.log("dogs", dogs);
  return <ul>{dogs} dogy</ul>;
}

export default Dogs;

在组件 Dogs() 中，我将狗定义为未定义

Answer 1

你不是dogs从你的useDogs钩子里回来的。

（另外，得到的响应数据，则需要等待对.json()从fetch响应。）

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

function useDogs() {
  const [dogs, setDogs] = useState({
    data: {},
  });

  useEffect(() => {
    const getData = async () => {
      const resp = await fetch("https://dog.ceo/api/breeds/image/random");
      const data = await resp.json();  // <-- this
      setDogs({ data });
      console.log(resp, data);
    };
    getData();
  }, []);
  return dogs;  // <-- this
}

function Dogs() {
  const dogs = useDogs();
  console.log("dogs", dogs);
  return <ul>{dogs} dogy</ul>;
}

export default Dogs;