Javascript 如何使用useState钩子更新数组

我尝试从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();
  }, []);

返回(
);
}
导出默认应用程序；

---

非常感谢你

如果你换了，我想应该可以用

for（数据类型的常量）{
setGenres（（oldGenres）=>[…oldGenres，g]）；
}

到

setGenres（（oldGenres）=>[…oldGenres，…data.genres]）；

您确定

useffect（（）=>{
const getGenres=async（）=>{
取回（“https://quote-garden.herokuapp.com/api/v2/genres")
.then（（response）=>response.json（））
。然后（（数据）=>{
setGenres（data.genres）；
});
};
getGenres（）；
}, []);

还不够吗？：）

起来。如果开始，可以使用

async wait

语法直到结束。它看起来更整洁

useffect（（）=>{
const getGenres=async（）=>{
const response=等待获取（“https://quote-garden.herokuapp.com/api/v2/genres");
const{genres}=wait response.json（）；
集合体裁（体裁）；
};
getGenres（）；
}, []);

您应该将

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]);

---

这回答了你的问题吗？那你能把剩下的文件寄出去吗？playI可能还有另一个问题，我刚刚编辑了代码。非常感谢您的时间。我刚刚查看了您的代码，由于setGenres函数尚未完成，因此日志中的genres将为空。如果您将该日志移到useEffect之外，您将看到在下一个renderit作品中填充了该类型！！！非常感谢您抽出时间。这是我下次会注意的。您还可以在存储数据之前通过

setGenres（data.genres.map（/*…*/）

尝试了这两种方法，但如果将

调试程序
放在
设置流派（data.genres）之前，则什么都没有尝试
在
data.genres
中你会得到什么？一个字符串数组，其中数组的每个元素都是quoteWait类别的名称！是否要在联机获取
console.log（流派）；//之后立即获取流派类型始终为空
？当然，您将在此处获得
[]
。=）
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]);