在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,只有可见的组件才会被渲染。

给TA打赏
共{{data.count}}人
人已打赏
解决方案

如果不存在,Cloudant API将创建数据库

2022-5-11 3:00:34

解决方案

在R中用字符串重命名保存在其他变量中的变量。

2022-5-11 3:00:36

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索