Государство не меняется в реакции

Question

Я сделал функцию обещания получить файл JSON из официального API NBA. В этой функции я пытаюсь обновить состояние использования. Но я продолжаю получать пустой массив после установки состояния. Что я пропускаю?

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 hook является асинхронным процессом. Это означает, что вызов console.log(gameData) сразу после setGameData(results) приведет к предыдущему результату (в данном случае пустому массиву). Если вы хотите получить доступ к переменной gameData с результатами вызова API, используйте другой хук 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) печатает пустой массив. Поскольку это все еще предыдущий массив.

После установки данных будет вызван новый рендер с обновленными данными, и вы сможете отобразить его.