React Native如何规避首次渲染undefined？直接渲染接口数据

组件首次渲染时，data的初始值是undefined，而useEffect会在首次渲染完成后才执行API请求，这就导致第一次渲染时data为undefined，请求完成后setData更新state触发第二次渲染才拿到有效数据。以下是两种符合你要求（不初始化state）的解决方案：

方案一：基于data的存在性做条件渲染 #

在组件渲染逻辑中判断data是否存在，不存在时返回null或加载组件，跳过无效渲染：

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))
}, []);

// 当data为undefined时，不渲染业务内容
if (!data) {
    return null; // 也可以返回<ActivityIndicator />显示加载状态
}

// 数据就绪后再渲染实际内容
return (
    <View>
        <Text>{data.title}</Text>
        <Text>{data.body}</Text>
    </View>
);

方案二：使用加载状态变量控制渲染 #

单独维护一个isLoading状态，更清晰地管理加载流程，同时能处理请求失败的场景：

const [data, setData] = useState();
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts/5")
        .then((response) => response.json())
        .then((fetchedData) => {
            setData(fetchedData);
            setIsLoading(false);
        })
        .catch((error) => {
            console.error("请求失败：", error);
            setIsLoading(false);
            // 可额外添加错误状态处理，比如setError(error)
        })
}, []);

// 加载中时跳过业务渲染
if (isLoading) {
    return <ActivityIndicator size="large" color="#0000ff" />;
}

// 数据就绪后渲染内容（若请求失败，data仍为undefined，可在此处添加错误提示）
if (!data) {
    return <Text>数据加载失败</Text>;
}

return (
    <View>
        <Text>{data.title}</Text>
        <Text>{data.body}</Text>
    </View>
);

这两种方法都不需要修改useState的初始值，而是通过条件判断让组件在数据准备完成后才渲染依赖data的内容，从根源上避免了undefined带来的问题。

内容的提问来源于stack exchange，提问作者Sabbir Ahhmed