React-Native Flat List RenderList问题

Question

I have a react-native project, using a FlatList that takes data from a node backend.

The data is retrieved from the backend, stored in the redux store and is mapped as this.props.entries which I don't have any issue accessing the data normally by mapping over it.

The issue I'm having is that I can't access the data inside RenderItem.

Here is the data coming from the node backend.

  { 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: [] }

I then have the following code for my 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>
      );
    }
  }

The FlatList is obviously getting my data as I have 4 items in this.props.entries and the result of running the code produces 4 outputs like below:

Data
Name:
Name:
Name:
Name:

But for whatever reason "entry.name" isn't returning anything.

Answer 1

You need to destructure the input to renderItem with the right property name, item .

For example, each element in your list is passed as the property item on an object, so you should have

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

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