时间戳

首页 > 解决方案 > React Native 结构导致 Axios 循环 HTTP 请求

javascript - React Native 结构导致 Axios 循环 HTTP 请求

问题描述

我正在通过 Expo 和 React Native 开发一个 iOS 应用程序。我已通过以下方式将项目作为空白项目启动：

> expo init

> tabs

并因此开始了一个带有反应导航的基本项目。下面是我的文件结构的图片。我添加的唯一内容是三个屏幕 HomeScreen、FunctionsScreen 和 ServantsScreen。（每个都以将从 REST API 获取的资源命名）。

文件结构截图

下面的代码来自我的一个屏幕，ServantsScreen，它被导入到 BottomTabNavigator.js，如下所示。（平面列表目前包含虚拟数据，一旦工作，将使用 api 调用填充。）

export default function ServantsScreen() {
    const [servants, setServants] = useState({})
    axios.get('http://18.197.158.213/servants').then(({data}) => {
        setServants(data.servants);
    });
    console.log(servants)
    return (

      <SafeAreaView
          style={{
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
        }}>

        <FlatList 
          data={
            [{name: 'a'}, {name: 'b'}, {name: 'c'}, {name: 'd'}]
          } 
          renderItem={
            ({ item }) => <Text>{item.name}</Text>
          } 
          keyExtractor={(item, index) => index.toString()}
        />

      </SafeAreaView>
    );
}

导入 BottomTabNavigator

      import ServantsScreen from '../screens/ServantsScreen'
      <BottomTab.Screen
        name="Tjänare"
        component={ServantsScreen}
        options={{
          title: 'Tjänare',
          tabBarIcon: ({ focused }) => <TabBarIcon focused={focused} name="md-book" />,
        }}
      />

正如预期的那样，导航完美无缺。但是在调试时，我看到下面的代码在一个永无止境的循环中被一遍又一遍地调用。即console.log(servants) 不断向控制台发送垃圾邮件，我认为这是因为整个函数被一遍又一遍地调用。我想知道如何解决这个问题，所以每个屏幕都是自己的（或将数据分发到不同页面的母版页？）通过 axios 调用 REST API，然后显示数据。

const [servants, setServants] = useState({})
    axios.get('http://18.197.158.213/servants').then(({data}) => {
        setServants(data.servants);
    });
    console.log(servants)

我应该如何处理这个问题？

标签： javascriptreactjsreact-nativeaxiosnative

解决方案

您应该将 axios 请求包装到 useEffect 挂钩中，如下所示：

这样它只会在组件安装时触发一次。

React.useEffect(() => {
    axios.get('http://18.197.158.213/servants').then(({data}) => {
        setServants(data.servants);
    });
},[]);

推荐阅读