保存js文件或刷新浏览器时常量的值发生变化

Question

I have this react component:

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;

When I console.log(quotesArray) on the fetchQuotes function, I get null . If I edit the file, say console.log(parsedJSON.quotes) , I get the value I expected (an array). I can go back to console.log(quotesArray) and I get the same array. If I refresh the browser, I get null again.

I have no idea what's going on, I just want to setQuotesArray to an array feched from the Url. any clues?

Answer 1

console.log(quotesArray) and console.log(parsedJSON.quotes) are different, and what you are seeing has to do with closures and asynchronous nature of setState calls.

When the function is first created, a closure is created around quotesArray at the time of render (before your function is called). At this point in time, quotesArray will be null as you initialized it

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

is equivalent to

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
};

When the function is called the first time, and you log quotesArray, it will display null. parsedJSON is a local variable which is updated within the scope of the function, hence it will display your data.

If you want to see quotesArray updating, you can create a useEffect with this as its dependency to see this within your App component.

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