Структура React Native заставляет Ax ios выполнять l oop HTTP-запросы - PullRequest
Новая
       122

Структура React Native заставляет Ax ios выполнять l oop HTTP-запросы

0 голосов
/ 28 мая 2020

Я разрабатываю приложение iOS через Expo и React Native. Я запустил проект как пустой проект через: 

> expo init

> tabs

и, таким образом, начал проект basi c с реактивной навигацией. Ниже приведено изображение моей файловой структуры. Единственное, что я добавил, - это три экрана - 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" />,
        }}
      />

Навигация работает отлично, как и ожидалось. Но при отладке я вижу, что следующий код вызывается снова и снова в бесконечном l oop. Т.е. console.log (слуги) продолжает спамить консоль, что, как я полагаю, является причиной того, что вся функция вызывается снова и снова. Мне интересно, как я могу это исправить, чтобы каждый экран создавал свою собственную (или главную страницу, которая распределяет данные на разные страницы?), Вызов REST API через ax ios, а затем отображает данные. 

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

Как мне решить эту проблему?

1 Ответ

0 голосов
/ 28 мая 2020

Вы должны обернуть запрос ax ios в хук useEffect следующим образом:

Таким образом, он будет срабатывать только один раз при монтировании компонента. 

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