我正在使用React-typeScript创建一个与旅行相关的表单。第一个组件
TravelForm
在useEffect钩子中使用多个async-await请求来更新第二个组件的状态
TravelGuideFields
但是，我的第二个组件TravelGuideFields根本没有显示道具的更新值。我用React开发工具检查了一下，状态正确地更新了新值。我感觉我的组件正在加载新的值。它可能我正在做多个async-await调用，因此组件正在加载最终结果值。是否有其他方法可以使我的组件更新为新值?
那么，这是我的第一个组件我在effect hook中进行多重网络调用，
import { FC, useEffect, useState } from "react";
import {
getOrderedbooks,
getOrderedSportsGears,
getOrderedTravelMaps
} from "../../httpRequests/TravelRequests";
import TravelGuideFields from "./TravelGuideFields";
const TravelForm: FC = () => {
//states
const [inputs, setInputs] = useState<TravelInputInterface>({
bookName: "",
bookPrice: 0.0,
runningShoeBrand: "",
runningShoeCost: 0.0,
mapType: "",
mapCost: 0.0,
});
useEffect(() => {
const resultInputs: TravelInputInterface = {
bookName: "",
bookPrice: 0.0,
runningShoeBrand: "",
runningShoeCost: 0.0,
mapType: "",
mapCost: 0.0,
};
const fetchBooks = async () => {
const res = await getOrderedbooks();
if (res !== undefined) {
resultInputs.bookName = res.BOOK_NAME;
resultInputs.bookPrice = res.BOOK_PRICE;
}
};
fetchBooks();
const fetchSportsGear = async () => {
const res = await getOrderedSportsGears();
if (res !== undefined) {
resultInputs.runningShoeBrand = res.SHOE_BRAND;
resultInputs.bookPrice = res.SHOE_PRICE;
}
};
fetchSportsGear();
const fetchTravelMaps = async () => {
const res = await getOrderedTravelMaps();
if (res !== undefined) {
resultInputs.mapType = res.MAP_TYPE;
resultInputs.mapCost = res.MAP_COST;
}
};
fetchTravelMaps();
console.log({ resultInputs });
setInputs(resultInputs);
}, []);
return <TravelGuideFormFields inputs={inputs} />;
};
default BlockchainConstantsForm;
//TravelGuideFields组件
const TravelGuideFields: FC<any> = ({inputs}) => {
return (
<div>
<div class="books"><input value={inputs.bookName} disabled/>
<input value={inputs.bookPrice} disabled/></div>
<div class="maps"><input value={inputs.mapType} disabled/></div>
<div class="sports"><input value={inputs.runningShoe} disabled/></div>
</div>
)
}
export default TravelGuideFields
//TravelRequests (HTTP request generator file)
//Books
export const getOrderedbooks = async (): Promise<bookInterface | undefined> => {
const res = await get(
`${mainURL}/books`
);
if (res.status === 200) {
return res.data;
}
return undefined;
};
//SportsGear
export const getOrderedSportsGears = async (): Promise<sportsInterface | undefined> => {
const res = await get(
`${mainURL}/sports`
);
if (res.status === 200) {
return res.data;
}
return undefined;
};
//Travelmaps
export const getOrderedTravelMaps = async (): Promise<mapInterface | undefined> => {
const res = await get(
`${mainURL}/map`
);
if (res.status === 200) {
return res.data;
}
return undefined;
};
这就是问题所在。
您没有在代码的所有级别执行async-await。
useEffect(() => {
const resultInputs: TravelInputInterface = {
bookName: "",
bookPrice: 0.0,
runningShoeBrand: "",
runningShoeCost: 0.0,
mapType: "",
mapCost: 0.0,
};
const fetchBooks = async () => {
const res = await getOrderedbooks();
if (res !== undefined) {
resultInputs.bookName = res.BOOK_NAME;
resultInputs.bookPrice = res.BOOK_PRICE;
}
};
fetchBooks();
const fetchSportsGear = async () => {
const res = await getOrderedSportsGears();
if (res !== undefined) {
resultInputs.runningShoeBrand = res.SHOE_BRAND;
resultInputs.bookPrice = res.SHOE_PRICE;
}
};
fetchSportsGear();
const fetchTravelMaps = async () => {
const res = await getOrderedTravelMaps();
if (res !== undefined) {
resultInputs.mapType = res.MAP_TYPE;
resultInputs.mapCost = res.MAP_COST;
}
};
fetchTravelMaps();
console.log({ resultInputs });
setInputs(resultInputs);
}, []);
上面的代码就是问题所在。
你可以修改一些代码:
useEffect(() => {
const promises = [getOrderedbooks, getOrderedSportsGears, getOrderedTravelMaps];
Promise.all(promises).then(promises => {
const [booksResponse, sportsGearResponse, travelMapsResponse] = promises;
const resultInputs: TravelInputInterface = {
bookName: "",
bookPrice: 0.0,
runningShoeBrand: "",
runningShoeCost: 0.0,
mapType: "",
mapCost: 0.0,
};
if (booksResponse !== undefined){
resultInputs.bookName = booksResponse.BOOK_NAME;
resultInputs.bookPrice = booksResponse.BOOK_PRICE;
}
if (sportsGearResponse !== undefined){
resultInputs.runningShoeBrand = sportsGearResponse.SHOE_BRAND;
resultInputs.bookPrice = sportsGearResponse.SHOE_PRICE;
}
if (travelMapsResponse !== undefined) {
resultInputs.mapType = travelMapsResponse.MAP_TYPE;
resultInputs.mapCost = travelMapsResponse.MAP_COST;
}
setInputs(resultInputs);
})
}, []);
使用Promise.all将保证逻辑仅在所有API完成后才运行。由于useEffect不能是异步函数，使用.then将比尝试使用async-await关键字干净得多。
如果你愿意，你仍然可以使用async-await，通过用另一个异步函数包装整个useEffect，并在useEffect内部调用它。
也许你可以使用promise.all()与await你没有添加await，这就是为什么它给你一个承诺试试这个，让我知道它是否有效。
const [booksResponse, sportsGearResponse , travelMapsResponse] = await
Promise.all([
getOrderedbooks(),
getOrderedSportsGears(),
getOrderedTravelMaps(),
]);