即使一个状态已经改变，但是在 React 中视图还没有被再次渲染 / Next.js

Question

即使一个状态已经改变，但是在 React 中视图还没有被再次渲染 / Next.js。这是我的代码和 console.log 结果。

作为先决条件，我认为我了解 useState、useEffect、Promise 和 async/await 的行为，但我无法自己弄明白。

GetGithubData 的 return 值是 Promise，所以我想知道这是否是更新不运行的原因仅仅是因为我无法访问里面的物体。但是，如果是这样的话，为了解决 Promise，我必须添加“等待”，并且为了这样做，我必须将函数更改为“异步”函数，并且当我将其更改为异步时函数，如果“return”return是一个对象，我会得到一个错误，并且首先不显示雷达图。

有人可以告诉我如何解决这个问题吗？我见过一些类似的问题，但其中 none 似乎是合适的。

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 函数，意味着它隐含地 returns 一个 Promise。您正在将 Promise 对象保存到 githubData 状态。

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

你是对的，你需要等待它解决。

您可以从返回的 promise 链接起来，并使用返回值在 .then 块中调用 setGithubData：

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

或者在 useEffect 挂钩中创建一个 async 函数和 await 值。

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

  getGitHubData();
}, []);

即使一个状态已经改变，但是在 React 中视图还没有被再次渲染 / Next.js

Even if a state has been changed, but the view has not been rendered again in React / Next.js

javascript

reactjs

react-hooks

use-effect