时间戳

首页 > 解决方案 > 获取随机json得到第一个未定义然后结果

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

问题描述

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;

标签： javascriptjsonreactjsconsoleuse-effect

解决方案

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

要检查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;

推荐阅读