Question

我有一个反应型项目，使用一个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

您需要使用正确的属性名称renderItem来分解到item的输入。

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

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

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

React-Native Flat List RenderList问题

1 个答案: