React Native FlatList 不渲染数组中的项目
Posted
技术标签:
【中文标题】React Native FlatList 不渲染数组中的项目【英文标题】：React Native FlatList not rendering items from array 【发布时间】：2021-04-15 02:21:10 【问题描述】：我浏览了文档，但似乎无法让 FlatList 呈现项目！通过控制台日志等，我确定问题出在 FlatList 上。
我有一个简单的组件，它可以获取一组用户的轨迹（位置点）。这部分工作正常，因为 console.log 正确打印了所有位置，我可以显示数组中的随机对象，例如 track[1].name 等。但是，当我尝试通过 FlatList 渲染所有轨道对象时，什么都没有显示！我已经尝试了 extraData 道具，并添加了 Flex 等以确保 FlatList 具有宽度和高度。这是组件：
import React, useContext, useEffect from "react"
import StyleSheet, Text, Button, FlatList, TouchableOpacity from "react-native"
import TrackContext from "../context/TrackContext"
import ListItem from "react-native-elements"
const TrackListScreen = ( navigation ) =>
// fetchTracks function adds array of data to state (tracks)
const tracks, fetchTracks = useContext(TrackContext)
React.useEffect(() =>
const unsubscribe = navigation.addListener('focus', () =>
fetchTracks()
);
return unsubscribe;
, [navigation]);
console.log(tracks) // THIS CORRECTLY PRINTS AN ARRAY OF OBJECTS
return <>
<Text style= fontSize: 48 >TrackListScreen</Text>
tracks.length ? (<>
<Text>tracks[0].name</Text> // **THIS DISPLAYS ON SCREEN FINE**
<FlatList
style=styles.flatList
keyExtractor=item => item._id
data=tracks
renderItem=( item ) =>
return <Text>item.name </Text> **//THIS DOES NOT DISPLAY**
extraData=tracks
/>
</>) : null
</>
const styles = StyleSheet.create(
flatList:
flex: 1,
borderColor: "red",
borderWidth: 4
,
listItem:
width: 900,
height: 900,
color: "black",
borderColor: "blue",
borderWidth: 4
)
export default TrackListScreen
这是控制台日志打印出来的内容：
Array [
Object
"__v": 0,
"_id": "5ff975b50d1ac007b45906c9",
"locations": Array [
Object
"_id": "5ff975b50d1ac007b45906ca",
"coords": Object
"accuracy": 64,
"altitude": 8.919908795971608,
"heading": -1,
"latitude": 54.66434256672557,
"longitude": -5.637025996311907,
"speed": 0.8577787280082703,
,
"timestamp": 1610184104504.8586,
,
Object
"_id": "5ff975b50d1ac007b45906cb",
"coords": Object
"accuracy": 32,
"altitude": 3.445790863037111,
"heading": -1,
"latitude": 54.6643316753395,
"longitude": -5.63689510684715,
"speed": 0.019007805734872818,
,
"timestamp": 1610184105515.2598,
,
Object
"_id": "5ff975b50d1ac007b45906cc",
"coords": Object
"accuracy": 5,
"heading": 0,
"latitude": 54.665740781677194,
"longitude": -5.635617909864419,
"speed": 0,
,
"timestamp": 100000000,
,
Object
"_id": "5ff975b50d1ac007b45906cd",
"coords": Object
"accuracy": 5,
"heading": 0,
"latitude": 54.6658407816772,
"longitude": -5.6355179098644195,
"speed": 0,
,
"timestamp": 100000000,
,
Object
"_id": "5ff975b50d1ac007b45906ce",
"coords": Object
"accuracy": 5,
"heading": 0,
"latitude": 54.6659407816772,
"longitude": -5.63541790986442,
"speed": 0,
,
"timestamp": 100000000,
,
Object
"_id": "5ff975b50d1ac007b45906cf",
"coords": Object
"accuracy": 5,
"heading": 0,
"latitude": 54.6660407816772,
"longitude": -5.63531790986442,
"speed": 0,
,
"timestamp": 100000000,
,
Object
"_id": "5ff975b50d1ac007b45906d0",
"coords": Object
"accuracy": 5,
"heading": 0,
"latitude": 54.6661407816772,
"longitude": -5.635217909864419,
"speed": 0,
,
"timestamp": 100000000,
,
Object
"_id": "5ff975b50d1ac007b45906d1",
"coords": Object
"accuracy": 32.00483309472351,
"altitude": 9.52780975341797,
"heading": -1,
"latitude": 54.66438883459561,
"longitude": -5.63704615479824,
"speed": 0.4152008891105652,
,
"timestamp": 1610184110513.6274,
,
Object
"_id": "5ff975b50d1ac007b45906d2",
"coords": Object
"accuracy": 5,
"heading": 0,
"latitude": 54.666240781677196,
"longitude": -5.6351179098644195,
"speed": 0,
,
"timestamp": 100000000,
,
Object
"_id": "5ff975b50d1ac007b45906d3",
"coords": Object
"accuracy": 5,
"heading": 0,
"latitude": 54.6663407816772,
"longitude": -5.63501790986442,
"speed": 0,
,
"timestamp": 100000000,
,
Object
"_id": "5ff975b50d1ac007b45906d4",
"coords": Object
"accuracy": 5,
"heading": 0,
"latitude": 54.666440781677196,
"longitude": -5.634917909864419,
"speed": 0,
,
"timestamp": 100000000,
,
],
"name": "Test hike",
"userId": "5fee4ac20d1ac007b45906c7",
,
Object
"__v": 0,
"_id": "5ff9d5c20d1ac007b45906d5",
"locations": Array [
Object
"_id": "5ff9d5c20d1ac007b45906d6",
"coords": Object
"accuracy": 65,
"altitude": 8.55748176574707,
"heading": -1,
"latitude": 54.66434516098353,
"longitude": -5.6370418752478075,
"speed": -1,
,
"timestamp": 1610208693218.3508,
,
Object
"_id": "5ff9d5c20d1ac007b45906d7",
"coords": Object
"accuracy": 65,
"altitude": 8.55748176574707,
"heading": -1,
"latitude": 54.66434516098353,
"longitude": -5.6370418752478075,
"speed": -1,
,
"timestamp": 1610208698112.293,
,
Object
"_id": "5ff9d5c20d1ac007b45906d8",
"coords": Object
"accuracy": 5,
"heading": 0,
"latitude": 54.6705407816772,
"longitude": -5.63081790986442,
"speed": 0,
,
"timestamp": 100000000,
,
Object
"_id": "5ff9d5c20d1ac007b45906d9",
"coords": Object
"accuracy": 5,
"heading": 0,
"latitude": 54.6706407816772,
"longitude": -5.630717909864419,
"speed": 0,
,
"timestamp": 100000000,
,
Object
"_id": "5ff9d5c20d1ac007b45906da",
"coords": Object
"accuracy": 5,
"heading": 0,
"latitude": 54.670740781677196,
"longitude": -5.630617909864419,
"speed": 0,
,
"timestamp": 100000000,
,
Object
"_id": "5ff9d5c20d1ac007b45906db",
"coords": Object
"accuracy": 5,
"heading": 0,
"latitude": 54.6708407816772,
"longitude": -5.63051790986442,
"speed": 0,
,
"timestamp": 100000000,
,
Object
"_id": "5ff9d5c20d1ac007b45906dc",
"coords": Object
"accuracy": 64,
"altitude": 3.615227508544926,
"heading": -1,
"latitude": 54.664237740674885,
"longitude": -5.636843777656393,
"speed": 0.7907719016075134,
,
"timestamp": 1610208701664.723,
,
Object
"_id": "5ff9d5c20d1ac007b45906dd",
"coords": Object
"accuracy": 5,
"heading": 0,
"latitude": 54.670940781677196,
"longitude": -5.63041790986442,
"speed": 0,
,
"timestamp": 100000000,
,
Object
"_id": "5ff9d5c20d1ac007b45906de",
"coords": Object
"accuracy": 32,
"altitude": 3.855814361572264,
"heading": -1,
"latitude": 54.664249383327544,
"longitude": -5.636888495043056,
"speed": 0.7547370791435242,
,
"timestamp": 1610208702713.8047,
,
Object
"_id": "5ff9d5c20d1ac007b45906df",
"coords": Object
"accuracy": 5,
"heading": 0,
"latitude": 54.6710407816772,
"longitude": -5.630317909864419,
"speed": 0,
,
"timestamp": 100000000,
,
Object
"_id": "5ff9d5c20d1ac007b45906e0",
"coords": Object
"accuracy": 5,
"heading": 0,
"latitude": 54.671140781677195,
"longitude": -5.630217909864419,
"speed": 0,
,
"timestamp": 100000000,
,
],
"name": "Walking",
"userId": "5fee4ac20d1ac007b45906c7",
,
]
无法理解我做错了什么！谢谢
【问题讨论】：
您可以在renderItem 中登录item 吗？
@LeriGogsadze 是的，console.log(item.name) 打印控制台区域中每个项目的名称，但我不明白为什么我不能在屏幕上显示。跨度>
【参考方案1】：
我猜你的解析有问题。
你能不能尝试一件事。打印你的 tracks 数组的长度我猜你的 k
keyExtractor=item => item._id
有问题，请您调试一下。
【讨论】：
【参考方案2】：随机开始完美运行，代码与上面完全相同。诡异的。不知道这是什么原因。在 renderItem 函数中使用 console.log(item) 进行调试的好提示，或者可以打印出 JSON.stringify(item) ，如果它不显示数据，则响应可能为空或格式错误。
【讨论】：
以上是关于React Native FlatList 不渲染数组中的项目的主要内容，如果未能解决你的问题，请参考以下文章
FlatList 不渲染从服务器获取的父组件数据，在 React Native 的子组件中
React Native：为啥 FlatList 会在数据更改时完全重新渲染？
React Native Flatlist不会在PureComponent上重新渲染