我有一個 React 類可以完成我需要的作業，我必須將其更改為功能組件才能使用 useLocation()。
事實證明，通過切換到功能組件，我的狀態更新不再正常作業。
我的功能是這種形式
import * as React from "react";
import { useEffect, useState } from "react";
import Axios from "axios";
import { useLocation } from "react-router-dom";
const URL = `my-path`;
const Sessions: React.FC<{ loadingParam?: boolean | undefined, someBooleanParam?: boolean | undefined, data?: AnyType[] | undefined }> = ({ loadingParam = true, someBooleanParam = undefined, data = undefined}) => {
const [loading, setLoading] = useState(loadingParam);
const [someBoolean, setSomeBoolean] = useState(someBooleanParam);
const [dataFetch, setDataFetch] = useState(data);
const location:any = useLocation();
useEffect(() =>
{
if(location.state == null){
console.log("first implementation");
} else {
const dataToFill:AnyType[]|undefined = location.state.data;
if( data ) {
setDataFetch(dataToFill);
setLoading(false);
setSomeBoolean(undefined);
}
}
}
,
[setDataFetch, setLoading, setSomeBoolean]
);
async function fetchData() {
try {
setLoading(true);
await Axios.get<AnyType[]>(URL)
.then(res => {
if (res.status === 200 && res != null) {
console.log("1 ", dataFetch); //undefined
console.log("1 bis ", res.data); //the data I want in the form I want
var copy:AnyType[] = [...res.data];
setDataFetch([...res.data]);
console.log("2 ", dataFetch); //undefined
console.log("2 ter ", copy); //the data I want in the form I want
setDataFetch(copy);
console.log("2 ", dataFetch); //undefined
setLoading(false);
if (dataFetch?.length === parseInt(someValue)){
setSomeBoolean(true);
} else {
setSomeBoolean(false);
}
} else {
console.log('problem when fetching the data from backend');
}
})
.catch(error => {
console.log(error);
});
}
catch (exception) {
console.log(exception);
}
}
console.log("8 ", dataFetch); //Appears in the web console several times during the execution of the fetchData function with the data I want
return(
<div className="container">
<div>
<button onClick={fetchData}> Click to get data </button>
</div>
{(someBoolean == true && loading == false) ?
Some Action
: <></>
</div>
);
}
export default Sessions;
在這段代碼中，在 fetchData 函式中，我需要知道 dataFetch 陣列的大小來設定 someBoolean 的值，但是在運行時 dataFetch 沒有在 try 塊中定義。但是當我在同一個函式中創建一個副本時，它的定義很好，我不明白。
我還嘗試通過將 Axios 呼叫放在一個回傳 promise 的異步函式中，從我的 fetchData 函式中呼叫它，但它給了我類似的結果。
我還嘗試在沒有 try/catch 塊的情況下使 fetchData 函式非異步，但結果仍然相同。
我需要的是在 fetchData 函式中，在 .then 阻止流停止以填充我的 dataFetch 然后檢查陣列的大小，然后渲染我的組件。但我不想設定 setTimeout，因為我認為這是一種過于靜態的行為。還有另一種方法嗎？
有沒有人看到我在這段代碼中做錯了什么來解釋這種行為？
提前感謝任何愿意花時間幫助我的人
uj5u.com熱心網友回復：
一種方法是將setSomeBoolean零件放入另一個在更改useEffect時運行的零件。dataFetch像這樣的東西：
import * as React from "react";
import { useEffect, useState } from "react";
import Axios from "axios";
import { useLocation } from "react-router-dom";
const URL = `my-path`;
const Sessions: React.FC<{ loadingParam?: boolean | undefined, someBooleanParam?: boolean | undefined, data?: AnyType[] | undefined }> = ({ loadingParam = true, someBooleanParam = undefined, data = undefined}) => {
const [loading, setLoading] = useState(loadingParam);
const [someBoolean, setSomeBoolean] = useState(someBooleanParam);
const [dataFetch, setDataFetch] = useState(data);
const location:any = useLocation();
useEffect(() =>
{
if(location.state == null){
console.log("first implementation");
} else {
const dataToFill:AnyType[]|undefined = location.state.data;
if( data ) {
setDataFetch(dataToFill);
setLoading(false);
setSomeBoolean(undefined);
}
}
}
,
[setDataFetch, setLoading, setSomeBoolean]
);
useEffect(()=>{
if (dataFetch?.length === parseInt(someValue)){
setSomeBoolean(true);
} else {
setSomeBoolean(false);
}
setLoading(false);
},[dataFetch])
async function fetchData() {
try {
setLoading(true);
await Axios.get<AnyType[]>(URL)
.then(res => {
if (res.status === 200 && res != null) {
console.log("1 ", dataFetch); //undefined
console.log("1 bis ", res.data); //the data I want in the form I want
var copy:AnyType[] = [...res.data];
setDataFetch([...res.data]);
console.log("2 ", dataFetch); //undefined
console.log("2 ter ", copy); //the data I want in the form I want
setDataFetch(copy);
console.log("2 ", dataFetch); //undefined
} else {
console.log('problem when fetching the data from backend');
}
})
.catch(error => {
console.log(error);
});
}
catch (exception) {
console.log(exception);
}
}
console.log("8 ", dataFetch); //Appears in the web console several times during the execution of the fetchData function with the data I want
return(
<div className="container">
<div>
<button onClick={fetchData}> Click to get data </button>
</div>
{(someBoolean == true && loading == false) ?
Some Action
: <></>
</div>
);
}
export default Sessions;
我也不確定為什么要[setDataFetch, setLoading, setSomeBoolean]作為第一個依賴陣列useEffect？
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/481040.html