即使已更改了 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();
}, []);