仍在學習，我在理解如何從異步函式中獲取資料然后在 DOM 中顯示它時遇到了問題。
事實上，我越來越不確定，因為 dom 在 async 函式之前呈現。
我被困住了，我的問題是如何處理這種情況？有什么好的做法？
export default function ProductCard ({ product }) {
const { handle, title } = product.node
const [productDetails, setProductDetails] = useState();
const data = async () => {
const data = await getProduct(handle)
//console.log(data)
setProductDetails(data);
}
useEffect(() => {
data();
}, [])
//or data();
console.log("productDetails", productDetails);
return (
<>
{productDetails.handle}
</>
)
}
感謝您的幫助和支持。
uj5u.com熱心網友回復：
你很近。第一次渲染未定義狀態是正常的，因為這是您將初始狀態設定為的，并且需要時間來獲取資料。所以你只需要為你還沒有資料的情況渲染一些不同的東西。null如果您不想渲染任何內容，或者可能是加載占位符，您可以回傳：
if (productDetails) {
return (
<>
{productDetails.handle}
</>
)
} else {
return <div>Loading...</div>
// or
//return null;
}
對于您的情況，這應該足夠了。但是，如果您發現自己正在使用一個非常復雜的組件，并且總是需要檢查undefined是很麻煩的，那么您可以將其拆分為兩個組件。外部組件進行加載并處理未定義的可能性，內部組件只渲染一次undefined不再可能：
const Parent = (props) => {
const [productDetails, setProductDetails] = useState();
useEffect(() => {
const fetchData = async () => {
const data = await getProduct(handle);
//console.log(data)
setProductDetails(data);
};
fetchData();
}, []);
if (productDetails) {
return <Child {...props} productDetails={productDetails} />;
} else {
return null;
}
};
const Child = ({ product, productDetails }) => {
// Everything in here can assume productDetails exists
return (
<>
{productDetails.handle}
</>
)
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/442718.html