React.js 从保存的 api 响应中显示图像

Question

所以我想从 API 做一个简单的图像获取。 我的目标是显示来自 API 的随机图像。 现在它说“数据”没有定义。 我不知道为什么会这样，因为我的 console.logs 在尝试在页面上显示之前正在工作。

这是我的 App.js

import React,{useEffect, useState} from 'react';
import Dog from './doggo';

//Main component
function App() {

  const [dogs, setDog] = useState();

  useEffect(() => {
      getDog();
  }, []);
  //Function to get data
  const getDog = async () => {
      //Fetch from url
      const response = await fetch("https://dog.ceo/api/breeds/image/random");
      //Store answer in data
      const data = await response.json();
      //Place data.message in setDog
      setDog(data.message);

      console.log(data.status);
      //data.message contains image url
      console.log(data.message);
  };
  return(
      <div>
          <h1>Press button to see your future dog!</h1>
          <button type="submit">See your dog!</button>
          <Dog
            image={data.message}
          />
      </div>
  );
};

export default App;

Answer 1

在<Dog image={data.message}/>中使用{dogs}而不是{data.message}数据只是 getDog() function 的变量。

Answer 2

我重新格式化了您的代码以解决一些问题。

正如其他评论者所说， data不在您尝试访问的 scope 中。 （它仅在getDog() function 内部可用。）

export default function App() {
  const [dog, setDog] = useState();

  const getDog = async () => {
    const response = await fetch("https://dog.ceo/api/breeds/image/random");
    const data = await response.json();
    setDog(data.message);
  };
  
  return (
    <div>
      <h1>Press button to see your future dog!</h1>
      <button
        onClick={() => {
          getDog();
        }}
      >
        See your dog!
      </button>
      {dog ? <Dog image={dog} /> : null}
    </div>
  );
}

工作密码笔