React Native新手求助：FlatList为何无法渲染数据源？

嘿，我来帮你排查FlatList无法渲染的问题～

你在componentDidMount里的setState写法有问题：

this.setState({ isLoading : false, dataSource : { _data } });

这里的{ _data }是ES6的对象简写，等价于{ _data: _data }——也就是说你把dataSource设置成了一个包含数组的对象，但FlatList的data属性要求必须传入纯数组，组件根本无法识别这个数据源，自然不会渲染任何内容。

你代码里的renderItem没写完，而且FlatList必须指定keyExtractor（否则会出现警告，也可能影响性能），我给你补全修正后的完整代码：

constructor(props) {
  super(props);
  // 先初始化正确的state结构，dataSource初始为空数组
  this.state = {
    isLoading: true,
    dataSource: []
  };
}

componentDidMount(){
  const _data = [{title: "Test Title", timestamp : "2018-10-02:23:11:45" }];
  // 直接将数组赋值给dataSource，不要用对象包裹
  this.setState({ isLoading : false, dataSource : _data });
}

render() {
  if(this.state.isLoading){
    return( 
      <View style={{flex: 1, padding: 20}}> 
        <ActivityIndicator/> 
      </View> 
    )
  }
  return ( 
    <View style={styles.body}> 
      <FlatList 
        data={this.state.dataSource} 
        // 完整实现renderItem，渲染每个item的内容
        renderItem={({item}) => (
          <View style={{padding: 16, borderBottomWidth: 1, borderBottomColor: '#eee'}}>
            <Text style={{fontSize: 18, fontWeight: 'bold'}}>{item.title}</Text>
            <Text style={{color: '#666', marginTop: 4}}>{item.timestamp}</Text>
          </View>
        )}
        // 添加keyExtractor，用索引作为唯一标识（如果item有自己的id，用id更好）
        keyExtractor={(item, index) => index.toString()}
      />
    </View> 
  )
}

• 把dataSource的赋值从对象改为纯数组；
• 初始化state时将dataSource设为空数组，避免类型不匹配；
• 补全renderItem的实现，并添加keyExtractor。

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