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

【问题标题】：React Native structure causes Axios to loop HTTP requestsReact Native 结构导致 Axios 循环 HTTP 请求
【发布时间】：2020-05-28 10:41:14
【问题描述】：

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

> expo init

> tabs

因此开始了一个带有 react-navigation 的基本项目。下面是我的文件结构的图片。我添加的唯一内容是三个屏幕 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) 不断向控制台发送垃圾邮件，我认为这是因为整个函数被一遍又一遍地调用。我想知道如何解决这个问题，所以每个屏幕都是自己的（或将数据分发到不同页面的母版页？）通过 axios 调用 REST API，然后显示数据。

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

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

【问题讨论】：

标签： javascript reactjs react-native axios native

【解决方案1】：

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

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

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

【讨论】：