FlatList 在获取 json 后收到未定义的值

Question

我需要在获取包含 connections 的 json 后渲染 FlatList。以下代码运行正确，但 renderItem 中的 travel 对象始终为 undefined.

import {Text, View, FlatList, ActivityIndicator} from 'react-native';
import React, {useEffect, useState} from 'react';

/**
 * http://transport.opendata.ch/v1/connections?from=8575201&to=8503000
 */

export function TravelsScreen({navigation}) {
  const [isLoading, setLoading] = useState(true);
  const [travels, setTravels] = useState([]);

  useEffect(() => {
    fetch('http://transport.opendata.ch/v1/connections?from=8575201&to=8503000')
      .then(response => response.json())
      .then(json => setTravels(json.connections))
      .catch(error => console.error(error))
      .finally(() => setLoading(false));
  }, []);

  return (
    <View style={{flex: 1, padding: 24}}>
      {isLoading ? (
        <ActivityIndicator />
      ) : (
        <FlatList
          data={travels}
          renderItem={({travel}) => <Text>Travel: {console.log(travel)}</Text>}
          keyExtractor={travel => travel.from.departureTimestamp.toString()}
        />
      )}
    </View>
  );
}

Answer 1

请将您的 FlatList 更新为：

        <FlatList
          data={travels}
          renderItem={({item}) => {console.log(item)}}
          //other properties
        />

从 official documentation 中，renderItem 方法从 FlatList 数组中取出 item，由于您使用 destructuring 语法提取它，因此您应该明确使用 item。没有 destructuring 语法的替代方案看起来像：

          <FlatList
          data={travels}
          renderItem={(travel) =>{ console.log(travel.item)}}
          //other properties
        />

FlatList 在获取 json 后收到未定义的值

FlatList receiving undefined values after fetching json

json

react-native

fetch-api

react-native-flatlist