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

Question

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

> expo init

> tabs

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

Screenshot of file structure

以下代码来自我的一个屏幕，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" />,
        }}
      />

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

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

我该如何处理这个问题？

Answer 1

您应该像这样将 axios 请求包装到 useEffect 挂钩中：

这样只会在组件挂载时触发一次

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

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

React Native structure causes Axios to loop HTTP requests

javascript

reactjs

react-native

axios

native