React Native FlatList数据不显示，首次加载报response.data未定义错误

1. 未触发数据请求：useEffect里仅引用了props.getProperties函数，未执行调用，导致首次加载时没有发起Redux异步请求获取数据。
2. 异步状态更新时机错误：即使调用了请求，props.getProperties是异步操作，useEffect依赖为空数组只会执行一次，此时props.properties还未拿到异步返回结果，setData设置的是初始空数据。
3. 初始状态与数据结构不匹配：useState初始值设为[]，但后续要访问response.data，数组本身没有data属性，首次加载直接访问会抛出undefined is not an object错误。
4. 函数组件错误使用this：函数组件中不存在this上下文，this.navigateToDetail会触发报错，应直接使用props中的导航方法。

方案一：优化本地状态同步 #

function LaunchScreen(props) {
  // 初始状态设为带data属性的对象，避免首次访问报错
  const [response, setData] = useState({ data: [] });

  useEffect(() => {
    // 调用Redux action发起数据请求
    const fetchData = async () => {
      await props.getProperties();
      setData({ data: props.properties });
    };

    fetchData();
  }, [props.getProperties]);

  // 监听Redux中props的变化，实时更新本地状态
  useEffect(() => {
    if (props.properties.length > 0) {
      setData({ data: props.properties });
    }
  }, [props.properties]);

  // 函数组件中直接定义导航函数
  const navigateToDetail = (item) => {
    props.navigation.navigate('DetailScreen', { item });
  };

  return (
    <View style={styles.mainContainer}>
      <FlatList
        data={response.data}
        // 添加keyExtractor避免渲染警告
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <TouchableOpacity
            style={styles.propertyItem}
            onPress={() => navigateToDetail(item)}>
            <Image style={styles.banner} source={{ uri: item.banner }} />
            <View style={{ padding: 10 }}>
              <Text style={styles.title}>{item.title}</Text>
              <Text style={styles.shortDescription}>
                {item.shortDescription}
              </Text>
            </View>
          </TouchableOpacity>
        )}
      />
      <View style={{ marginBottom: 20 }}>
        <Button style={{ width: '90%' }} title={'Give Donation'} />
      </View>
    </View>
  );
}

方案二：直接使用Redux props（更简洁） #

省去本地状态，直接依赖Redux中的props.properties，减少状态同步问题：

function LaunchScreen(props) {
  useEffect(() => {
    // 执行数据请求
    props.getProperties();
  }, [props.getProperties]);

  const navigateToDetail = (item) => {
    props.navigation.navigate('DetailScreen', { item });
  };

  // 处理props为空的情况，默认返回空数组
  const listData = props.properties || [];

  return (
    <View style={styles.mainContainer}>
      <FlatList
        data={listData}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <TouchableOpacity
            style={styles.propertyItem}
            onPress={() => navigateToDetail(item)}>
            <Image style={styles.banner} source={{ uri: item.banner }} />
            <View style={{ padding: 10 }}>
              <Text style={styles.title}>{item.title}</Text>
              <Text style={styles.shortDescription}>
                {item.shortDescription}
              </Text>
            </View>
          </TouchableOpacity>
        )}
      />
      <View style={{ marginBottom: 20 }}>
        <Button style={{ width: '90%' }} title={'Give Donation'} />
      </View>
    </View>
  );
}

• 确保调用props.getProperties()触发数据请求
• 匹配数据结构，避免初始状态访问不存在的属性
• 监听Redux props变化，保证数据更新时UI同步
• 修正函数组件中this的错误使用
• 为FlatList添加keyExtractor避免渲染警告

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