React Native 如何在屏幕渲染前调用getPosts函数？

在React Native函数组件中，要在屏幕首次渲染前触发getPosts请求，需要使用React提供的useEffect钩子，具体修改如下：

修改步骤 #

• 首先从React依赖中引入useEffect钩子
• 新增空依赖数组的useEffect回调，在回调内部调用getPosts方法，空依赖可以保证该逻辑仅在组件首次挂载时执行一次
• 补全loading状态控制逻辑，请求过程中展示加载动画提升体验

完整修改后代码 #

import React, {useState, useEffect} from 'react';
import {FlatList, StyleSheet, SafeAreaView} from 'react-native';
import PostGoalCard from '../components/PostGoalCard';
import Loader from '../components/Loader';
import axios from 'axios';

const PostsScreen = ({navigation}) => {
  const [loading, setLoading] = useState(false);
  const [data, setData] = React.useState([])
  const url = 'http://10.0.2.2:8000';

  // 新增useEffect，组件挂载时自动调用getPosts
  useEffect(() => {
    getPosts();
  }, []);

  const getPosts = () => {
    // 新增：请求开始时开启加载动画
    setLoading(true);
    axios
      .get(`${url}/posts`)
      .then(response => {
        console.log(response)
        setData(response.data);
      })
      .catch(error => {
        console.log(JSON.stringify(error));
      })
      // 新增：无论请求成功失败都关闭加载动画
      .finally(() => {
        setLoading(false);
      });
  } 

  return (
    <SafeAreaView style={styles.container}>
      <Loader loading={loading} />
      <FlatList
        style={styles.flatlist}
        data={data}
        keyExtractor={(item, index) => index}
        renderItem={({item}) => (
          <PostGoalCard key={item.username} item={item} navigation={navigation} />
        )}
      />
    </SafeAreaView>
  );
};

export default PostsScreen;

如果需要每次页面切到前台都刷新数据，可以配合React Navigation的useFocusEffect钩子替换上述useEffect即可。

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