获取随机json得到第一个未定义然后结果

Question

这里是 reactjs 的初学者，试图获取随机 json，得到我想要的结果，但不是我想要的方式，由于某种原因，它首先打印“未定义”，然后再打印结果。为什么我不能得到结果而没有这个'？ 我的代码：

import { useEffect, useState } from "react";
import "./App.css";

function App() {
  const [thumbnail, setThumbnail] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/photos")
      .then((response) => response.json())
      .then((json) => {
        setThumbnail(json);
      });
  }, []);

  console.log(thumbnail[0]?.thumbnailUrl);
  return (
    <div className="App">
      <h1>Build</h1>
      <p></p>
    </div>
  );
}

export default App;

Answer 1

console.log() 里面的 App() 直接会使用初始状态。缩略图是空的，所以它会显示未定义。

要检查thumbnail，您应该使用另一个useEffect 并添加thumbnail 依赖项。

useEffect(() => {
  if (thumbnail.length > 0) {
    console.log(thumbnail[0].thumbnailUrl);
  }
}, [thumbnail]);

---

import { useEffect, useState } from "react";
import "./App.css";

function App() {
  const [thumbnail, setThumbnail] = useState([]);
  const [isLoaded, setLoaded] = useState(false);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/photos")
      .then((response) => response.json())
      .then((json) => {
        setLoaded(true);
        setThumbnail(json);
      });
  }, []);

  useEffect(() => {
    if (isLoaded) {
      console.log(thumbnail[0]?.thumbnailUrl);
    }
  }, [thumbnail]);

  return (
    <div className="App">
      <h1>Build</h1>
      <p></p>
    </div>
  );
}

export default App;

Answer 2

当你的http 没有响应时，你可以简单地渲染一个loading 组件（在这个例子中是一个文本），然后当thumbnail 状态改变时，React 会重新渲染你的组件并更新它使用新数据。

只是一个工作示例：

import React, { useEffect, useState } from "react";
import "./App.css";

function App() {
  const [thumbnail, setThumbnail] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    setIsLoading(true);
    fetch("https://jsonplaceholder.typicode.com/photos")
      .then((response) => response.json())
      .then((json) => {
        setThumbnail(json);
      })
      .finally(() => {
        setIsLoading(false);
      });
  }, []);

  return (
    <div className="App">
      <h1>Build</h1>
      {isLoading ? (
        <h3>Loading...</h3>
      ) : (
        thumbnail.map((item) => {
          return <span key={item.id}>{item.title}</span>;
        })
      )}
    </div>
  );
}

export default App;