React-Native Flatlist 渲染列表问题

Question

我有一个 react-native 项目，使用从节点后端获取数据的 FlatList。

数据是从后端检索的，存储在 redux 存储中并映射为 this.props.entries，通过映射正常访问数据我没有任何问题。

我遇到的问题是我无法访问 RenderItem 中的数据。

这是来自节点后端的数据。

  { startingBalance: 1000,
  entries:
   [ TextRow {
       owner_id: 56,
       id: 1324,
       date: 2019-01-22T00:00:00.000Z,
       name: 'Groceries ',
       amount: '58.00',
       type: 'debit',
       rec: null,
       balance: '942.00' },
     TextRow {
       owner_id: 56,
       id: 1457,
       date: 2019-06-04T00:00:00.000Z,
       name: 'zxc',
       amount: '233.00',
       type: 'credit',
       rec: null,
       balance: '1175.00' },
     TextRow {
       owner_id: 56,
       id: 1459,
       date: 2021-06-30T00:00:00.000Z,
       name: 'Test',
       amount: '100.00',
       type: 'credit',
       rec: 'Tes_shtkalrk',
       balance: '1275.00' },
     TextRow {
       owner_id: 56,
       id: 1460,
       date: 2021-06-30T00:00:00.000Z,
       name: 'Test',
       amount: '100.00',
       type: 'credit',
       rec: 'Tes_shtkalrk',
       balance: '1375.00' } ],
  transactions: [] }

然后我的 FlatList 有以下代码

    render() {
    if (this.props.entries) {
      const data = Object.values(this.props.entries);

      return (
        <View>
          <Text>Data</Text>
          <FlatList
            data={data}
            renderItem={entry => <Text>Name: {entry.name}</Text>}
          />
        </View>
      );
    } else {
      return (
        <View>
          <Text>No DATA</Text>
        </View>
      );
    }
  }

FlatList 显然正在获取我的数据，因为我在 this.props.entries 中有 4 个项目，运行代码的结果产生 4 个输出，如下所示：

Data
Name:
Name:
Name:
Name:

但是出于某种原因 "entry.name" 没有返回任何东西。

Answer 1

您需要使用正确的属性名称 item.

解构 renderItem 的输入

例如，列表中的每个元素都作为对象上的属性 item 传递，因此您应该

      <FlatList
        data={data}
        renderItem={({ item }) => <Text>Name: {item.name}</Text>}
      />

https://facebook.github.io/react-native/docs/flatlist#renderitem

React-Native Flatlist 渲染列表问题

React-Native Flat List RenderList Issue

javascript

react-native

react-native-flatlist