我是新啟動的 react native 框架，我正在使用 useState 和 useEffect 從 api 獲取資料并存盤在 useStete 中。當我渲染或嘗試從 api 獲取資料時，第一個日志/渲染給我 undefined 并且它給我 API 資料。第一個未定義對我來說是個問題，所以我想避免第一次渲染來獲取資料。我可以直接為 API的獲取資料提供第二次渲染。
所以要么我怎么能在這里克服未定義，等到給我獲取資料或直接為我提供第二次渲染，避免第一次渲染未定義。
我真的很感謝你的幫助，
提前致謝！
注意：我不想初始化 State 以避免未定義。
const [data, setData] = useState();
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/posts/5")
.then((response) => response.json())
.then((data) => setData(data))
.catch((error) => console.error(error))
}, []);
console.log(data);
輸出：
uj5u.com熱心網友回復：
我同意之前的所有答案，但我還會添加一個微調器或骨架組件，以表明正在發生某些事情。如果您根本不顯示任何內容，用戶可能會認為什么都沒有發生，并且應用程式會出現鋸齒狀/無回應。
（事實上??，第一代 iPhone 似乎比 Android 同類產品回應更快，只是因為它有一個加載影片，這讓用戶感覺正在發生一些事情，即使這個程序與 Android 上的時間一樣長）
uj5u.com熱心網友回復：
您可以避免第一次渲染，但這不是您應該這樣做的方式。而是檢查您是否有資料。如果不是，則回傳 null。
沒有資料時，您的組件不會被渲染。
useEffect(…)
if(!data) return null;
return (<YourComponent />)
uj5u.com熱心網友回復：
當資料仍在您的主回傳螢屏上加載時，只需顯示一個 ActivityIndi??cator（微調器/加載器）
return(
{
loading?<ActivityIndicator/>:<YourComponents/>
})
您的加載狀態將在您的 Api 或 fetch 函式上為假，您必須在呼叫函式時將加載設定為 true，或者在您的狀態收到所有必需資料時將其默認設定為 true 和 false。
uj5u.com熱心網友回復：
如果在 useState 中設定默認值：這將是 API 請求之前的值
如果沒有在 useState 中設定默認值：API 請求之前的默認值將始終未定義
解決此問題的一種方法是執行以下操作：
import React, { useEffect, useState } from "react";
export default function MyComponent() {
const [data, setData] = useState();
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/posts/5")
.then((response) => response.json())
.then((data) => setData(data))
.catch((error) => console.error(error));
}, []);
if (!data) {
return <React.Fragment></React.Fragment>;
}
console.log(data);
return <MyChildComponent>{data}</MyChildComponent>;
}
解釋：
if (!data) {
return <React.Fragment></React.Fragment>;
}
if (!data) {
return <></>;
}
if (!data) {
return null;
}
這些選項都是相同的，它們可以幫助您避免在沒有可用資料的情況下呈現任何內容
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/522564.html