状态不会改变反应

Question

我做了一个承诺函数，从官方 NBA API 得到一个 JSON 文件。在这个函数中，我正在尝试更新一个使用状态。但是在设置状态后我一直得到一个空数组。我忽略了什么？

const Games = () => {
    const [gameData, setGameData] = useState([]);
    const { readableDate } = useContext(NBAContext);

    const insertTime = readableDate.split('/');


        useEffect(() => {
            const jsonSrc = `https://cors-anywhere.herokuapp.com/http://data.nba.net/10s/prod/v1/${insertTime[2]}${insertTime[1]}${insertTime[0]}/scoreboard.json`;

            const getScores = async () => {
                        const response = await fetch(jsonSrc);
                        return await response.json()
                };

            getScores().then((result) => {
                console.log(result)
                setGameData(result);
                console.log(gameData);
            });

        }, [readableDate])

Answer 1

编辑：实际答案-设置状态，无论是使用this.setState还是useState挂钩，都是一个异步过程。这意味着在 setGameData(results) 之后立即调用 console.log(gameData) 将产生先前的结果（在本例中为空数组）。如果要使用 API 调用的结果访问 gameData 变量，请使用另一个 useEffect 挂钩，将 gameData 作为依赖项：

useEffect(() => {
  console.log(gameData)
}, [gameData])

初始答案，代码 improvement/advice：删除将代码包裹在 getScores 中的承诺行，并且只是 return await response.json() 的结果。

useEffect(() => {
  const jsonSrc = `https://cors-anywhere.herokuapp.com/http://data.nba.net/10s/prod/v1/${insertTime[2]}${insertTime[1]}${insertTime[0]}/scoreboard.json`;

  const getScores = async () => {
    try {
      const response = await fetch(jsonSrc);
      return await response.json()
    } catch (err) {
      console.log(err)
      throw err
    }
  }

   getScores().then((result) => {
     console.log(result)
     setGameData(result.games);
   });
}, [readableDate])

Answer 2

useState的设置和setState一样，也是异步的。这就是 console.log(gameData) 打印空数组的原因。因为它仍然是以前的数组。

数据设置完成后，会调用更新后的数据渲染，即可显示。

状态不会改变反应

State doesn't change in react

javascript

api

fetch

reactjs

use-state