React Native中Axios请求API后如何分页面展示不同响应字段

你可以通过全局状态管理来实现一次API调用后，让多个页面共享并展示不同的数据部分，下面是两种常用的落地方案：

方案1：React Context（轻量无依赖，适合中小型项目） #

1. 创建全局数据上下文 #

新建DataContext.js文件，统一管理API数据和获取逻辑：

import React, { createContext, useState } from 'react';
import axios from 'axios';

export const DataContext = createContext();

export const DataProvider = ({ children }) => {
  const [apiData, setApiData] = useState([]);
  const baseURL = 'https://jsonplaceholder.typicode.com';

  const fetchData = () => {
    axios.get(`${baseURL}/posts`)
      .then(res => setApiData(res.data))
      .catch(err => console.error(err));
  };

  return (
    <DataContext.Provider value={{ apiData, fetchData }}>
      {children}
    </DataContext.Provider>
  );
};

2. 在根组件中注入上下文 #

修改App.js，用DataProvider包裹所有页面路由组件：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { DataProvider } from './DataContext';
import Home from './Home';
import TitlePage from './TitlePage';

const Stack = createStackNavigator();

export default function App() {
  return (
    <DataProvider>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={Home} />
          <Stack.Screen name="TitlePage" component={TitlePage} />
        </Stack.Navigator>
      </NavigationContainer>
    </DataProvider>
  );
}

3. 在Home.js中展示id字段 #

import { View, Text, FlatList, Button } from 'react-native';
import React, { useContext } from 'react';
import { DataContext } from './DataContext';

export default function Home() {
  const { apiData, fetchData } = useContext(DataContext);

  return (
    <View>
      <Button title="获取数据" onPress={fetchData} />
      <FlatList
        data={apiData}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <Text>帖子ID: {item.id}</Text>
        )}
      />
    </View>
  );
}

4. 在TitlePage.js中展示title字段 #

import { View, Text, FlatList } from 'react-native';
import React, { useContext } from 'react';
import { DataContext } from './DataContext';

export default function TitlePage() {
  const { apiData } = useContext(DataContext);

  return (
    <View>
      <FlatList
        data={apiData}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <Text>帖子标题: {item.title}</Text>
        )}
      />
    </View>
  );
}

方案2：Redux（适合大型复杂项目） #

如果你的项目有大量全局状态需要管理，可以用Redux：

1. 安装依赖 #

npm install @reduxjs/toolkit react-redux

2. 创建Redux切片（postsSlice.js） #

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

export const fetchPosts = createAsyncThunk(
  'posts/fetchPosts',
  async () => {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    return response.data;
  }
);

const postsSlice = createSlice({
  name: 'posts',
  initialState: [],
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(fetchPosts.fulfilled, (state, action) => {
      return action.payload;
    });
  },
});

export default postsSlice.reducer;

3. 配置Redux Store（store.js） #

import { configureStore } from '@reduxjs/toolkit';
import postsReducer from './postsSlice';

export const store = configureStore({
  reducer: {
    posts: postsReducer,
  },
});

4. 在根组件注入Store #

修改App.js：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Provider } from 'react-redux';
import { store } from './store';
import Home from './Home';
import TitlePage from './TitlePage';

const Stack = createStackNavigator();

export default function App() {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={Home} />
          <Stack.Screen name="TitlePage" component={TitlePage} />
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  );
}

5. 在Home.js中调用API并展示id #

import { View, Text, FlatList, Button } from 'react-native';
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchPosts } from './postsSlice';

export default function Home() {
  const dispatch = useDispatch();
  const posts = useSelector(state => state.posts);

  return (
    <View>
      <Button title="获取数据" onPress={() => dispatch(fetchPosts())} />
      <FlatList
        data={posts}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <Text>帖子ID: {item.id}</Text>
        )}
      />
    </View>
  );
}

6. 在TitlePage.js中展示title #

import { View, Text, FlatList } from 'react-native';
import React from 'react';
import { useSelector } from 'react-redux';

export default function TitlePage() {
  const posts = useSelector(state => state.posts);

  return (
    <View>
      <FlatList
        data={posts}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <Text>帖子标题: {item.title}</Text>
        )}
      />
    </View>
  );
}

核心思路 #

两种方案本质都是把API获取的数据存到全局可访问的状态中，各个页面只需要从全局状态中提取自己需要的字段展示即可，避免重复调用API。

内容的提问来源于stack exchange，提问作者Andrew Punio