Native Base组件在JSON数组map函数中无法渲染的问题求助

嘿，这问题我熟！你代码里的map回调函数犯了一个很常见的小错误——没有返回要渲染的ListItem组件，所以哪怕数据都拿到了，组件也不会被渲染出来。

具体问题点 #

当你在箭头函数里使用大括号{}的时候，JavaScript不会自动返回函数体内的内容，必须显式写上return关键字。你现在的map回调只是定义了ListItem，但没把它返回给React去渲染。

修复方案 #

有两种简单的方式可以解决：

方式1：显式添加return

<List>
  { this.props.data.map(albumdata => {
      // 加上return，把组件返回出去
      return (
        <ListItem key={albumdata.id}> {/* 别忘了加key！ */}
          <Text>{albumdata.title}</Text>
        </ListItem>
      )
    })
  }
</List>

方式2：用箭头函数的隐式返回（去掉大括号）

如果你的回调逻辑很简单，可以直接去掉大括号，让箭头函数自动返回后面的JSX：

<List>
  { this.props.data.map(albumdata => (
        <ListItem key={albumdata.id}> {/* 必须加key */}
          <Text>{albumdata.title}</Text>
        </ListItem>
      )
    )
  }
</List>

额外提醒：一定要加key属性 #

React要求列表渲染的每个子组件都要有唯一的key属性，这能帮助React高效地更新列表。最好用数据里的唯一标识（比如albumdata.id），如果没有的话可以临时用索引index（但不推荐在数据会变动的场景下使用）。

完整修改后的组件代码 #

import React, { Component } from 'react';
import { Card, List, ListItem, Thumbnail, Body,Button, Text } from 'native-base';
import { Image } from 'react-native';

export default class CardSection extends Component {
  render() {
    return (
      <Card>
        <List>
          <ListItem>
            <Text>First list item</Text>
          </ListItem>
        </List>
        <List>
          { this.props.data.map(albumdata => (
              <ListItem key={albumdata.id}>
                <Text>{albumdata.title}</Text>
              </ListItem>
            ))
          }
        </List>
      </Card>
    );
  }
}

这样修改后，你的ListItem应该就能正常渲染出来啦！

内容的提问来源于stack exchange，提问作者arunkmoury