Javascript 当我保存js文件或刷新浏览器时，常量的值会更改

我有一个反应组件：

import "./App.scss";
import { useState } from "react";
import { useEffect } from "react";

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

function App() {
    const [quotesArray, setQuotesArray] = useState(null);

    const fetchQuotes = async (url) => {
        const response = await fetch(url);
        const parsedJSON = await response.json();
        setQuotesArray(parsedJSON.quotes);
        console.log(quotesArray);
    };

    useEffect(() => {
        fetchQuotes(quotesDbUrl);
    }, [quotesDbUrl]);


    return (
        <div></div>
    );
}

export default App;

导入“/App.scss”； 从“react”导入{useState}； 从“react”导入{useffect}； 常量quotesDbUrl= "https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json"; 函数App（）{ const[quotesArray，setQuotesArray]=useState（null）； const fetchQuotes=async（url）=>{ const response=等待获取（url）； const parsedJSON=await response.json（）； setQuotesArray（parsedJSON.quotes）； 控制台日志（引用数组）； }; useffect（（）=>{ fetchQuotes（quotesDbUrl）； }，[quotesDbUrl]）； 返回( ); } 导出默认应用程序； 当我在

fetchQuotes

函数上

console.log（quotesArray）

时，我得到

null

。如果我编辑文件，比如说

console.log（parsedJSON.quotes）

，我会得到我期望的值（一个数组）。我可以返回到

console.log（quotesArray）

并得到相同的数组。如果我刷新浏览器，我会再次得到空值

我不知道发生了什么，我只想将QuotesArray设置为从Url获取的数组。有什么线索吗？

console.log（quotesArray）和console.log（parsedJSON.quotes）是不同的，您看到的与闭包和setState调用的异步性质有关

首次创建函数时，将在渲染时（在调用函数之前）围绕quotesArray创建闭包。此时，quotesArray在初始化时将为null

const fetchQuotes = async (url) => {
    const response = await fetch(url);
    const parsedJSON = await response.json();
    setQuotesArray(parsedJSON.quotes);
    console.log(quotesArray);
};

相当于

const fetchQuotes = async (url) => {
    const response = await fetch(url);
    const parsedJSON = await response.json();
    setQuotesArray(parsedJSON.quotes); //setting state is async, this will not be available in quotesArray until the component rerendered, and this function is recreated.
    console.log(null); //quotesArray was null when the fetchQuotes closure was created
};

第一次调用函数时，如果您记录quotesArray，它将显示null。parsedJSON是一个局部变量，在函数范围内更新，因此它将显示您的数据

如果您想看到quotesArray更新，可以创建一个useEffect，将其作为其依赖项，以便在应用程序组件中看到它

   useEffect(() => {
       console.log(`quotesArray updated: ${quotesArray}`)
   },[quotesArray])

---

谢谢你的回复。所以我知道setQuotesArray实际上正在工作，但在此之前，quotesArray被初始化为null。如果在函数外部输入console.log（quotesArray），首先会得到未定义的数组，然后是数组。但是我不能使用quotesArray（在我的应用程序中使用它），因为我总是首先得到这个初始值。那么，有没有办法将这个常量与fetchQuotes中指定的值一起使用，或者我只能使用null值？这没有多大意义。将状态初始化为表示要使用它的数据的内容是一个好主意。对于数组，通常

useState（[]）

。这将允许数组函数在不引发诸如“无法读取未定义的属性”映射等错误的情况下工作。状态初始化是在第一次渲染之前完成的，因此在这种情况下，如果您在应用程序中登录控制台，您应该获得一个空数组，然后在异步调用完成后获取数据。