即使狀態已更改，但視圖尚未在 React / Next.js 中再次呈現。這是我的代碼和 console.log 結果。
作為先決條件，我想我了解 useState、useEffect、Promise 和 async/await 的行為，但我自己卻無法弄清楚。
GetGithubData 的回傳值是 Promise，所以我想知道這是否是因為我無法訪問內部物件而無法運行更新的原因。但是，如果是這種情況，為了解決 Promise，我必須添加“await”，為此，我必須將函式更改為“async”函式，并且當我將其更改為 async函式，如果“回傳”回傳一個物件，我會得到一個錯誤，并且雷達圖首先沒有顯示。
有人可以告訴我如何解決這個問題嗎？我見過一些類似的問題，但似乎沒有一個適合。
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 的結果如下。
uj5u.com熱心網友回復：
GetGithubData是一個async函式，意味著它隱式回傳一個 Promise。您正在將 Promise 物件保存到githubData狀態中。
useEffect(() => {
setGithubData(GetGithubData());
}, []);
你是對的，你需要等待它解決。
您可以從回傳的 Promise 鏈接并使用回傳值呼叫setGithubData塊.then：
useEffect(() => {
GetGithubData()
.then(data => {
setGithubData(data);
});
}, []);
或者在鉤子和值中創建一個async函式。useEffectawait
useEffect(() => {
const getGitHubData = async () => {
const data = await GetGithubData();
setGithubData(data);
};
getGitHubData();
}, []);
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/418665.html
標籤：
上一篇：更新事件后添加多個文本區域