FlatList的renderItem需用item.item.property而非item.property的技术咨询

嘿，这个问题其实是React Native FlatList组件的设计细节导致的，我来给你拆解清楚：

FlatList的renderItem回调函数接收的参数不是直接的数组元素，而是一个包含多个属性的对象。这个对象里的item字段才是你data数组中的单个数据项，除此之外它还包含index（当前项的索引）、separators（处理分隔器的相关方法）等辅助属性。

你代码里的genre变量其实就是这个包裹对象，所以真正的 genre 数据要从genre.item里取，这就是为什么你不能直接用genre.id的原因。

这里给你几种让代码更简洁的写法：

1. 参数解构（最推荐） #

直接在回调参数里解构出item，这样就能直接使用item.id、item.name了，代码清爽很多：

<FlatList
  data={this.state.music_genres}
  extraData={this.state}
  renderItem={({ item }) => (
    <ListItem>
      <CheckBox
        onPress={this.onGenreChange.bind(this, item, item.id)}
        checked={this.eventHasGenre(item, item.id) > -1}
      />
      <Body>
        <Text>{item.name}</Text>
      </Body>
    </ListItem>
  )}
/>

顺便提一句：你原来代码里checked的三元表达式可以简化，因为this.eventHasGenre(...) > -1本身就是布尔值，不用再套true/false啦。

2. 重命名解构变量 #

如果你习惯用genre这个变量名，可以在解构的时候给item重命名：

<FlatList
  data={this.state.music_genres}
  extraData={this.state}
  renderItem={({ item: genre }) => (
    <ListItem>
      <CheckBox
        onPress={this.onGenreChange.bind(this, genre, genre.id)}
        checked={this.eventHasGenre(genre, genre.id) > -1}
      />
      <Body>
        <Text>{genre.name}</Text>
      </Body>
    </ListItem>
  )}
/>

这样就能像你期望的那样直接用genre.id、genre.name了，完全符合你的命名习惯。

3. 提取为单独方法 #

如果renderItem里的逻辑比较复杂，把它提取成组件的单独方法会更易读和维护，还能优化一点性能：

// 组件内单独定义方法
renderGenreItem = ({ item }) => {
  return (
    <ListItem>
      <CheckBox
        onPress={() => this.onGenreChange(item, item.id)}
        checked={this.eventHasGenre(item, item.id) > -1}
      />
      <Body>
        <Text>{item.name}</Text>
      </Body>
    </ListItem>
  );
};

// 在FlatList中引用
<FlatList
  data={this.state.music_genres}
  extraData={this.state}
  renderItem={this.renderGenreItem}
/>

这里把bind换成了箭头函数，避免每次渲染都创建新的函数实例，对性能更友好。

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