Блог

Мои данные таковы:

 [
  [
    'id' => 1,
    'date' => '2021-04-19',
    'name' => 'John Doe',
    'payment' => 25
  ],
  [
    'id' => 2,
    'date' => '2021-04-19',
    'name' => 'Mary Doe',
    'payment' => 23
  ],
  [
    'id' => 3,
    'date' => '2021-04-18',
    'name' => 'Peter Pan',
    'payment' => 30
  ],
  [
    'id' => 4,
    'date' => '2021-04-18',
    'name' => 'Mike Myers',
    'payment' => 18
  ],
  [
    'id' => 5,
    'date' => '2021-04-17',
    'name' => 'Jack Cole',
    'payment' => 28
  ]
]
 

Я хочу получить такой результат:

 2021-04-19
---------------------
| John Doe - 25     |
---------------------
| Mary Doe - 23     |
---------------------

2021-04-18
---------------------
| Peter Pan - 30    |
---------------------
| Mike Myers - 18   |
---------------------

2021-04-17
---------------------
| Jack Cole - 28    |
---------------------
 

В моем методе рендеринга у меня есть это:

 return (
  <View style={styles.container}>
    <FlatList
      data={myjsondata}
      keyExtractor={(item: any) => item.id}
      renderItem={this._renderList}
      showsVerticalScrollIndicator={false}
    />
  </View>
);
 

Моя _renderList функция такова:

   _renderList = ({item}:any) => {
    return (
      <View>
        <Text>{item.date}</Text>
        <TouchableOpacity>
          <View>
            <Text>
              {item.name}
            </Text>
            <Text>
              ${item.payment}
            </Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  };
 

Я пробовал использовать состояние, но, по-видимому, его нельзя использовать в цикле renderList. Можно ли этого достичь с помощью Flatlist, или вместо этого следует использовать SectionList? Заранее спасибо 🙂