有些人可以瀏覽我的代碼，看看我犯了什么錯誤。
React 和 Axios 代碼
import React, { useState, useEffect } from "react";
import { useParams, Outlet } from "react-router-dom";
import axios from "axios";
export default function Agent() {
const [Agent, setAgent] = React.useState();
const agentid = useParams();
React.useEffect(() => {
axios.get(`https://valorant-api.com/v1/agents/`).then((res) => {
setAgent(res.data);
});
}, []);
console.log(Agent);
return (
<div>
<h1>{agentid.agentid}</h1>
</div>
);
}
控制臺日志結果
有人可以解釋為什么有一個未定義的嗎？
uj5u.com熱心網友回復：
Axios 已經回傳了一個 data 屬性，并且 api 也這樣做了，它最終會是這樣的：
setAgent(res.data.data);
起初它會顯示 undefined 因為 API 呼叫是異步的，因此不會立即顯示，所以當 API 回傳您的回應時，您正在設定一個導致組件重新渲染的狀態，因此再次運行 console.log，并且useEffect 之外的任何內容。
uj5u.com熱心網友回復：
預計第一個未定義。當您呼叫 API 時，您正在等待 promise 解決，但同時 React 繼續渲染組件。在 Promise 解決后，將執行回呼，它使用來自 API 的資料更改狀態。當狀態發生變化時，整個組件會重新渲染，您可以看到一秒鐘console.log的實際資料。
uj5u.com熱心網友回復：
將默認值設定為您的狀態 const [Agent, setAgent] = React.useState({}); 我將默認狀態設定為空物件。您可以按預期撰寫模擬物件
使用效果鉤子將在組件初始渲染后呼叫。這就是為什么第一個日志未定義的原因。
uj5u.com熱心網友回復：
Axios.get 是一個異步呼叫。從 api 獲取資料需要一些時間。在那之前，“代理”是未定義的。此呼叫是異步的，JavaScript 不會等待“代理”被定義，因此您會看到“未定義”日志。
之后，一旦資料從 Api 通過 Axios 到達客戶端，就會在您的代碼中呼叫 setstate 并重新渲染所有內容。因此，您會看到這次列印的資料。
所以，你沒有做錯任何事。這是預期的行為。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/446723.html
標籤：javascript 反应 axios
上一篇：使用字串呼叫方法（不是函式）