即使已更改了 state，但視圖尚未在 React / Next.js 中再次呈現

Question

即使 state 已更改，但視圖尚未在 React / Next.js 中再次呈現。 這是我的代碼和 console.log 結果。

作為先決條件，我想我了解 useState、useEffect、Promise 和 async/await 的行為，但我自己無法弄清楚。

GetGithubData 的返回值是 Promise，所以我想知道這是不是因為我無法訪問里面的 object 而導致更新無法運行的原因。 但是，如果是這種情況，為了解決 Promise，我必須添加“await”，為此，我必須將 function 更改為“async” ZC1C425268E68785D1AB5074 時function，如果“return”返回一個object，我會得到一個錯誤，並且首先沒有顯示雷達圖。

有人可以告訴我如何解決這個問題嗎？ 我見過一些類似的問題，但似乎沒有一個適合。

Radarchart.tsx 代碼如下，它是一個像這樣繪制雷達圖的組件。 這個圖本身在我的瀏覽器中繪制成功，但是提交到 Github 的次數仍然是 20 而不是 12，這意味着 useEffect 的結果不會再次呈現。

import React, { useEffect, useState } from "react";
import {
  Chart,
  LineElement,
  PointElement,
  RadialLinearScale,
} from "chart.js";
import { Radar } from "react-chartjs-2";
import GetGithubData from "../services/githubService";

const RadarChart = () => {
  const [githubData, setGithubData] = useState({});

  useEffect(() => {
    setGithubData(GetGithubData());
  }, []);

  const randomNumber1 = githubData["total"] ? githubData["total"] : 20;
  console.log(githubData);
  console.log(randomNumber1);
  const randomNumber2 = 35;
  const randomNumber3 = 45;
  const randomNumber4 = 75;
  const randomNumber5 = 85;

  const data = {
    datasets: [
      {
        data: [
          randomNumber1,
          randomNumber2,
          randomNumber3,
          randomNumber4,
          randomNumber5,
        ],
        backgroundColor: "rgba(255, 99, 132, 0.2)",
        borderColor: "rgba(255, 99, 132, 1)",
      },
    ],
  };

  Chart.register(
    LineElement,
    PointElement,
    RadialLinearScale,
  );

  return <Radar data={data} options={options} />;
};

export default RadarChart;

githubService.tsx 是一個服務文件，用於獲取我想從 Github API 獲取的數據。

const GetGithubData = async () => {
  const owner = "aaaa";
  const repo = "bbbb";
  const url = `https://api.github.com/repos/${owner}/${repo}/stats/contributors`;

  const response = await fetch(url);
  const data = await response.json();
  return data[0];
};

export default GetGithubData;

console.log 的結果如下。

Answer 1

GetGithubData是一個async function，這意味着它隱式返回 Promise。 您將 Promise object 保存到githubData state 中。

useEffect(() => {
  setGithubData(GetGithubData());
}, []);

你是對的，你需要等待它解決。

您可以從返回的 promise 鏈接並使用返回值在.then塊中調用setGithubData ：

useEffect(() => {
  GetGithubData()
    .then(data => {
      setGithubData(data);
    });
}, []);

或者在useEffect掛鈎中創建一個async function 並await該值。

useEffect(() => {
  const getGitHubData = async () => {
    const data = await GetGithubData();
    setGithubData(data);
  };

  getGitHubData();
}, []);