处理加载与错误状态
添加 isLoading 和错误状态变量，在数据加载期间显示 ActivityIndicator，并在请求失败时显示易于用户理解的错误消息。
处理加载与错误状态 是 CoddyKit 上的免费 React Native Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Native Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Native Academy 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
The Three States of Async Data
Every asynchronous data operation has three possible states: loading (the request is in flight), success (data is available), and error (the request failed). A well-built React Native screen handles all three states explicitly, showing the appropriate UI for each. Ignoring any state leads to blank screens, app crashes, or confusing experiences for users.
Defining Loading and Error State Variables
Add isLoading and error state variables alongside your data state. Initialize isLoading to true since the component begins in a loading state before any data has been fetched. Initialize error to null so it is falsy when there is no error.
const [posts, setPosts] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);Setting States During Fetch
In the fetch logic, reset the error state at the start of each attempt (so a retry clears the previous error), set the data on success, set the error on failure, and always set isLoading to false in the finally block so the spinner stops regardless of the outcome.
const fetchData = async () => {
setIsLoading(true);
setError(null);
try {
const response = await axios.get('/posts');
setPosts(response.data);
} catch (err) {
setError(err.message || 'Something went wrong');
} finally {
setIsLoading(false);
}
};Showing an ActivityIndicator While Loading
Return an ActivityIndicator when isLoading is true. Center it on the screen using a flex container. React Native's ActivityIndicator uses the native platform spinner, matching iOS and Android design conventions automatically.
if (isLoading) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<ActivityIndicator size='large' color='#6200ee' />
<Text style={{ marginTop: 12, color: '#666' }}>Loading...</Text>
</View>
);
}Showing a User-Friendly Error Message
When error is not null, render an error screen with a clear message and a retry button. Avoid showing raw error objects to users — display a human-readable message instead. The retry button calls the fetch function again, resetting the error and starting a new loading cycle.
if (error) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', padding: 24 }}>
<Text style={{ fontSize: 18, marginBottom: 8 }}>Oops!</Text>
<Text style={{ color: '#666', textAlign: 'center', marginBottom: 24 }}>
{error}
</Text>
<Button title='Try Again' onPress={fetchData} />
</View>
);
}Full Component with All Three States
Assemble the complete component: return the loading view when loading, the error view when an error exists, and the data view otherwise. This pattern — early returns for loading and error, then the main content — keeps the JSX clean and readable.
export default function PostsScreen() {
const [posts, setPosts] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => { fetchData(); }, []);
if (isLoading) return <LoadingView />;
if (error) return <ErrorView message={error} onRetry={fetchData} />;
return <FlatList data={posts} renderItem={renderItem} keyExtractor={(p) => String(p.id)} />;
}Distinguishing Network vs HTTP Errors
Axios throws for both network failures (no internet, timeout) and HTTP errors (4xx, 5xx). Inspect error.response to distinguish them. If error.response exists, the server responded with an error status. If it is undefined, the request never reached the server (network error or timeout).
} catch (err) {
if (err.response) {
// Server responded with 4xx/5xx
const status = err.response.status;
if (status === 404) setError('Content not found');
else if (status === 401) setError('Please log in again');
else setError('Server error: ' + status);
} else {
// No response — network/timeout issue
setError('Network error. Check your connection.');
}
}Displaying Inline Errors in Forms
For form submissions, show the error inline near the submit button rather than replacing the whole screen. Users can then correct their input without navigating away. Use a small error Text component with a red color beneath the submit button, and clear it when the user modifies any field.
function LoginForm() {
const [apiError, setApiError] = useState(null);
const handleSubmit = async () => {
setApiError(null);
try {
await login(email, password);
} catch (err) {
setApiError('Invalid email or password');
}
};
return (
<View>
{/* inputs here */}
{apiError && <Text style={{ color: 'red' }}>{apiError}</Text>}
<Button title='Sign In' onPress={handleSubmit} />
</View>
);
}Loading State for Button Actions
For actions that take time (submitting a form, deleting an item), show a loading indicator inside the button and disable it while the action is in progress. This prevents duplicate submissions and gives the user immediate feedback that the action is being processed.
function SubmitButton({ onPress }) {
const [isSubmitting, setIsSubmitting] = useState(false);
const handlePress = async () => {
setIsSubmitting(true);
await onPress();
setIsSubmitting(false);
};
return (
<TouchableOpacity
onPress={handlePress}
disabled={isSubmitting}
style={[styles.button, isSubmitting && styles.disabledButton]}
>
{isSubmitting
? <ActivityIndicator color='#fff' />
: <Text style={styles.buttonText}>Submit</Text>}
</TouchableOpacity>
);
}Skeleton Loading Screens
Instead of a full-screen spinner, consider showing a skeleton screen — placeholder shapes that mimic the layout of the real content. This pattern (used by Facebook, LinkedIn, YouTube) gives a better perceived performance because users see the structure of the content immediately, even before the data loads.
function SkeletonRow() {
return (
<View style={styles.skeletonRow}>
<View style={styles.skeletonAvatar} />
<View style={{ flex: 1 }}>
<View style={styles.skeletonLine} />
<View style={[styles.skeletonLine, { width: '60%' }]} />
</View>
</View>
);
}
if (isLoading) return <FlatList data={[1,2,3,4,5]} renderItem={() => <SkeletonRow />} keyExtractor={(i) => String(i)} />;Toasts and Snackbars for Non-Critical Errors
Not every error warrants a full error screen. For transient errors that the user can recover from (like a failed background refresh), use a toast notification or snackbar that appears briefly at the bottom of the screen. Libraries like react-native-toast-message provide ready-made toast components for React Native.
import Toast from 'react-native-toast-message';
// On a background refresh failure:
Toast.show({
type: 'error',
text1: 'Could not refresh',
text2: 'Showing cached data',
visibilityTime: 3000,
});Quick Check
Test your understanding of handling loading and error states from this lesson.
Lesson Recap
In this lesson you learned: track isLoading and error as separate state variables alongside your data, use ActivityIndicator for full-screen loading and inline error text for form errors, and always call setIsLoading(false) in a finally block so the spinner stops in all cases. Next up we cover POST, PUT, and DELETE requests with Axios.
常见问题解答
「处理加载与错误状态」课时是免费的吗？
是的 — 「处理加载与错误状态」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Native Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Native Academy 课程共包含 4 节课。
「处理加载与错误状态」这节课中我会学到什么？
添加 isLoading 和错误状态变量，在数据加载期间显示 ActivityIndicator，并在请求失败时显示易于用户理解的错误消息。 你通过在浏览器中直接运行的动手代码来练习 React Native Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 React Native Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 React Native Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「处理加载与错误状态」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 React Native Academy 课中编写并运行代码吗？
能。每节 React Native Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。