如何使用 useState Hook 更新數組

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 個解決方案

解決方案1
0 2020-10-23 14:53:51

解決方案2
0 2020-10-23 15:20:49

解決方案3
0 2020-10-23 15:45:01

如何使用 useState Hook 更新數組

問題描述

3 個解決方案

解決方案1 0 2020-10-23 14:53:51

解決方案2 0 2020-10-23 15:20:49

解決方案3 0 2020-10-23 15:45:01

解決方案1
0 2020-10-23 14:53:51

解決方案2
0 2020-10-23 15:20:49

解決方案3
0 2020-10-23 15:45:01