Question

我试图从URL提取数据并以JSON格式获取结果，然后不在我的状态下存储对象结果。但它总是返回一个空数组。

const [genres, setGenres] = useState([]);
  useEffect(() => {
    const getGenres = async () => {
      fetch("https://quote-garden.herokuapp.com/api/v2/genres")
        .then((response) => response.json())
        .then((data) => {
           for (const g of data.genres) {
             setGenres((oldGenres) => [...oldGenres, g]);
           }          
        });
    };
    getGenres();
  }, []);

这是代码：我看不出问题出在哪里。 ps：我删除了导入内容，因此代码更具可读性

import React, { useEffect, useState } from "react";
function App() {
  const [quoteOfTheDay, setQuoteOfTheDay] = useState("");
  const [authorOfQod, setAuthorOfQod] = useState("");
  useEffect(() => {
    const getQuoteOfTheDay = async () => {
      fetch("https://quotes.rest/qod?language=en")
        .then((response) => response.json())
        .then((data) => {
          const qod = data.contents.quotes[0].quote;
          const author = data.contents.quotes[0].author;
          setQuoteOfTheDay(qod);
          setAuthorOfQod(author);
        });
    };
    getQuoteOfTheDay();
  }, []);
  const [genres, setGenres] = useState([]);
  useEffect(() => {
    const getGenres = async () => {
      fetch("https://quote-garden.herokuapp.com/api/v2/genres")
        .then((response) => response.json())
        .then((data) => {
          for (const g of data.genres) {
             setGenres((oldGenres) => [...oldGenres, g]);
           } 
        });
      console.log(genres); // genres always empty
    };
    getGenres();
  }, []);

  return (
    <div className="app">
      <Head quoteOfTheDay={quoteOfTheDay} author={authorOfQod} />
      <div className="app__category">
        <QuoteCategory genre="sport" />
      </div>
    </div>
  );
}

export default App;

非常感谢

Answer 1

我认为如果您进行更改，它应该会起作用

for (const g of data.genres) {
    setGenres((oldGenres) => [...oldGenres, g]);
}

到

setGenres((oldGenres) => [...oldGenres, ...data.genres]);

Answer 2

您确定

useEffect(() => {
  const getGenres = async () => {
    fetch("https://quote-garden.herokuapp.com/api/v2/genres")
      .then((response) => response.json())
      .then((data) => {
         setGenres(data.genres);
      });
  };
  getGenres();
}, []);

还不够吗？：）

上。如果您开始，则可以使用async-await语法直到最后。看起来更整洁。

useEffect(() => {
  const getGenres = async () => {
    const response = await fetch("https://quote-garden.herokuapp.com/api/v2/genres");
    const { genres } = await response.json();

    setGenres(genres);
  };
  
  getGenres();
}, []);

Answer 3

您应该将genresState作为依赖项

const [genresState, setGenres] = useState([])



useEffect(() => {
  const getGenres = async () => {
    const response = await fetch("https://quote-garden.herokuapp.com/api/v2/genres");
    const { genres } = await response.json();

    setGenres(genres);
  };
  
  getGenres();
}, [genresState]);

如何使用useState Hook更新数组

3 个答案: