2

我做了一个 promise 函数来从 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])
4

2 回答 2

1

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

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

最初的答案，代码改进/建议：删除将代码包装getScores在 promise 中的行，然后只返回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])
于 2020-03-11T13:28:34.510 回答
0

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

数据设置后，将使用更新的数据调用新的渲染，您可以显示它。

于 2020-03-11T13:37:01.707 回答