React Native FlatList 不渲染数组中的项目答案

【问题标题】：React Native FlatList not rendering items from arrayReact Native FlatList 不渲染数组中的项目
【发布时间】：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) 打印控制台区域中每个项目的名称，但我不明白为什么我不能在屏幕上显示。跨度>

标签： javascript reactjs react-native react-native-flatlist

【解决方案1】：

我猜你的解析有问题。你能不能尝试一件事。打印你的 tracks 数组的长度我猜你的 k

 keyExtractor={item => item._id}

有问题，请您调试一下。

【讨论】：

【解决方案2】：

随机开始完美运行，代码与上面完全相同。诡异的。不知道这是什么原因。在 renderItem 函数中使用 console.log(item) 进行调试的好提示，或者可以打印出 {JSON.stringify(item)} ，如果它不显示数据，则响应可能为空或格式错误。

【讨论】：