Question

我做了一个promise函数，以从官方NBA API获取JSON文件。在此功能中，我试图更新一个usestate。但是我在设置状态后一直得到一个空数组。我在俯视什么？

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

edit：实际答案-设置状态，无论是使用this.setState还是使用useState钩子，都是一个异步过程。这意味着在console.log(gameData)之后立即调用setGameData(results)将得到前一个结果（在这种情况下为空数组）。如果要使用API调用的结果访问gameData变量，请使用另一个useEffect作为依赖的gameData钩子：

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

最初的答案，代码改进/建议：删除承诺中将代码包装在getScores中的行，然后返回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

就像setState一样，useState的设置也是异步的。这就是为什么console.log（gameData）打印空数组的原因。因为它仍然是前一个数组。

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

状态不会改变

2 个答案: