无法在 FlatList 中呈现数组

Question

我已阅读堆栈溢出中关于此主题的所有类似问题。但是我的信息没有显示。

我正在从 tomtom api 获取位置。为简单起见，我将结果限制在一个位置。我的数据：

items:  Array [
  Object {
    "address": Object {
      "country": "United States",
      "countryCode": "US",
      "countryCodeISO3": "USA",
      "countrySecondarySubdivision": "Hidalgo",
      "countrySubdivision": "TX",
      "countrySubdivisionName": "Texas",
      "extendedPostalCode": "78542-7214",
      "freeformAddress": "1718 South 28th Avenue, Edinburg, TX 78542",
      "localName": "Edinburg",
      "municipality": "Edinburg",
      "postalCode": "78542",
      "streetName": "South 28th Avenue",
      "streetNumber": "1718",
    },
    "dist": 7911851.058335642,
    "entryPoints": Array [
      Object {
        "position": Object {
          "lat": 26.28239,
          "lon": -98.14742,
        },
        "type": "main",
      },
    ],
    "id": "840489007442969",
    "info": "search:ta:840489007442969-US",
    "poi": Object {
      "categories": Array [
        "company",
        "equipment rental",
      ],
      "categorySet": Array [
        Object {
          "id": 9352038,
        },
      ],
      "classifications": Array [
        Object {
          "code": "COMPANY",
          "names": Array [
            Object {
              "name": "equipment rental",
              "nameLocale": "en-US",
            },
            Object {
              "name": "company",
              "nameLocale": "en-US",
            },
          ],
        },
      ],
      "name": "Wylie Implement Edinbu",
      "phone": "+1 956-550-8822",
    },
    "position": Object {
      "lat": 26.28223,
      "lon": -98.1464,
    },
    "score": 1.9846990108,
    "type": "POI",
    "viewport": Object {
      "btmRightPoint": Object {
        "lat": 26.2813,
        "lon": -98.14536,
      },
      "topLeftPoint": Object {
        "lat": 26.28316,
        "lon": -98.14744,
      },
    },
  },
]

我的组件：

const AutocompleteResults = (props) => {
  const [locations, setLocations] = useState(props.items);
  console.log("items: ", locations);
  useEffect(() => {
    setLocations(props.items);
  }, [props.items]);

  return (
    <View style={{ flex: 1, marginBottom: 20 }}>
      <Text>Result</Text>
    {locations.length>0 ? (
        <>
          <Text>Items</Text>
          <FlatList
            style={{ flex: 1, borderColor: "red", borderWidth: 1 }}
            horizontal={false}
            data={locations}
            keyExtractor={(item, index) => index.toString()}
            renderItem={({location}) => {
              console.log("single location ", location);
              return <Text>Location</Text>;
            }}
          />
        </>
      ) : null}
    </View>
  );
};

const style = StyleSheet.create({
  viewStyle: {
    flex: 1,
    justifyContent: "center",
  },
});

export default AutocompleteResults;

我在控制台上看到的是：single location undefined

我尝试了在堆栈溢出中找到的所有建议。我认为问题出在 extractKey 方法中，但我不知道如何解决它。

在屏幕上，我只看到“结果”、“项目”等字样，后跟红色破折号（来自我的平面列表样式）

编辑:

我按以下方式编辑了渲染函数：

renderItem={({ item }) => {
              console.log("single location ", item);
              return (
                <View style={{ flex: 1, height: 30 }}>
                  <Text>Location</Text>
                </View>
              );
            }}

但是“位置”文本仍然没有显示

Answer 1

您正在 FlatList 的 renderItem 函数中解构 location。这失败了，因为没有这样的参数。参数名为item.

这在 the documentation 中有解释。

renderItem({ item, index, separators });

item (Object): The item from data being rendered.

下面的代码应该可以解决这个问题。

return (
    <View style={{ flex: 1, marginBottom: 20 }}>
      <Text>Result</Text>
    {locations.length>0 ? (
        <>
          <Text>Items</Text>
          <FlatList
            style={{ flex: 1, borderColor: "red", borderWidth: 1 }}
            horizontal={false}
            data={locations}
            keyExtractor={(item, index) => index.toString()}
            renderItem={({item}) => {
              console.log("single location ", item);
              return <Text>Location</Text>;
            }}
          />
        </>
      ) : null}
    </View>
  );
};

extractKey函数没问题

无法在 FlatList 中呈现数组

Can not render array within FlatList

reactjs

react-native

react-native-flatlist