在React Native中使用Map与Flatlist。

我很难在状态对象的数组上正确使用.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是一个事件数组，它有一个多余的标识符 “事件”)

通过这个实现，当我向数组添加元素时，没有任何显示。我试过使用FlatList，但那需要每个元素的keysIDs。我不知道如何

1. 当有新事件加入时，用新列表更新页面
2. 使用.map()获取要在元素中显示的事件元素。
3. 使用生成的ID，这样它就可以正确地用FlatList来代替渲染。

解决方案：

看来你的代码中存在几个问题。

• 正如Tom Slutsky评论的那样，你需要在传递给map函数的回调中返回组件。箭头函数中的返回值有几种情况，这取决于你如何编写它们。箭头函数的语法
• 看来你在事件中使用的id总是相同的(-1)，但是当渲染一个项目列表时，React要求每个组件都有唯一的键，如果你在事件数组中使用set setState推送新的项目来更新你的状态，你的组件将重新渲染和更新。如果你用set setState更新你的状态，在你的事件数组中推送一个新的项目，你的组件将被重新渲染和更新。

关于Flatlist的使用，它们有性能优化，如果你处理长长的组件列表，这些优化是有用的。如果你使用map，即使组件在屏幕上不可见，你的所有列表都会被渲染。而使用Flatlist，只有可见的组件才会被渲染。