在 React Native 中使用 Map 与 Flatlist

Question

我正在努力在状态对象的数组上正确使用 .map() 来显示元素。这是我的代码

class EventListFront extends Component {
    state = {
        currentEvent: new event(),
        events: new eventList(),
    }
...
<View>
   {this.state.events.events.map(event => {
        <View key={event.id}>{event.title}</View>})}

</View>

我的事件结构如下：

class event {
    constructor(
        id = -1,
        name = 'UNSET',
        description = 'UNSET',
        location = 'UNSET',
        ...
        ) {}

（eventList是一个事件数组，它冗余地有一个标识符'events'）

有了这个实现，当我添加到数组中时，我什么都没有显示。我尝试过使用 FlatList，但这需要每个元素的键/ID。我不知道该怎么做

1. 添加新事件时使用新列表更新页面
2. 使用 .map() 获取要在元素中显示的事件元素
3. 使用生成的 ID，以便它可以使用 FlatList 正确呈现。

Answer 1

您的代码中似乎有几个问题：

• 正如 Tom Slutsky 评论的那样，您需要在传递给 map 函数的回调中返回组件。箭头函数的返回值有多种情况，具体取决于您编写它们的方式。 Syntax of arrow functions
• 似乎您在事件中总是使用相同的 id (-1)，但是在呈现项目列表时，React 要求每个组件具有唯一的键。如果您使用 set setState 在事件数组中推送一个新项目来更新您的状态，您的组件将被重新渲染和更新。

关于 Flatlist 的使用，它们具有性能优化，如果您处理很长的组件列表，这将非常有用。如果您使用地图，即使组件在屏幕上不可见，您的所有列表也会被渲染。使用 Flatlist，仅呈现可见的组件。