gpt4 book ai didi

reactjs - 状态返回空数组

转载 作者:行者123 更新时间:2023-12-04 08:32:21 24 4
gpt4 key购买 nike

我正在尝试从 useState 钩子(Hook)访问状态,但即使在我修改它之后它也会给我初始状态。

const quotesURL = "https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json";


function QuoteGenerator() {
const [quotes, setQuotes] = useState([]);
const [currentQuote, setCurrentQuote] = useState({ quote: "", author: "" });

useEffect(() => {
axios(quotesURL)
.then(result => {
console.log(result);
setQuotes(result.data);
})
.then(() => {

console.log(quotes);
});
}, []);


console.log(quotes) 返回空数组而不是对象数组

最佳答案

这是你应该如何做的:

const quotesURL = "https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json";


function QuoteGenerator() {
const [quotes, setQuotes] = useState([]);
const [currentQuote, setCurrentQuote] = useState({ quote: "", author: "" });

useEffect(() => { // THIS WILL RUN ONLY AFTER YOUR 1ST RENDER
axios(quotesURL)
.then(result => {
console.log(result);
setQuotes(result.data); // HERE YOU SET quotes AND IT WILL TRIGGER A NEW RENDER
})
}, []); // BECAUSE YOU'VE SET IT WITH '[]'

useEffect(() => { // THIS WILL RUN WHEN THERE'S A CHANGE IN 'quotes'
if (quotes.length) {
setSomeOtherState(); // YOU CAN USE IT TO SET SOME OTHER STATE
}
},[quotes]);

}

此代码如何工作:
  • 第一次渲染:你只是初始状态。 useEffects还没有运行。
  • 第一次渲染后:两种效果都将运行(按此顺序)。第一个将触发 axios 请求。第二个什么都不做,因为 quotes没有length然而。
  • Axios 请求完成: then子句将运行,setQuotes将被调用以设置新的 quotes值(value)。这将触发重新渲染。
  • 第二次渲染:现在quotes状态已更新为新值。
  • 第二次渲染后:只有第二个useEffect将运行,因为它正在“监听”quotes 中的更改只是改变的变量。然后你可以用它来设置一些你说的状态。
  • 关于reactjs - 状态返回空数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56784954/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com