ReactNative：FlatList没有显示

我正在尝试制作一个自定义组件，如果第一个选择不够明确，它将显示新选择的选项。我正在使用该FlatList组件显示数据，但似乎没有显示作为道具提供的数据。

这是render组件的功能

import { Header, List, ListItem } from "react-native-elements";
import PickerBox from "./PickerBox";

render() {
    return (
      
        
         {
            
          }}
          keyExtractor = {(item) => item.c_syn_name}
        />
      
    );
}

这是PickerBox组件

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
    padding: 10,
    marginLeft: 16,
    marginRight: 16,
    marginTop: 8,
    marginBottom: 8,
    borderRadius: 5,
    backgroundColor: "#FFF",
    elevation: 2
  },
  title: {
    fontSize: 16,
    color: "#000"
  },
  container_text: {
    flex: 1,
    flexDirection: "column",
    marginLeft: 12,
    justifyContent: "center"
  },
  description: {
    fontSize: 11,
    fontStyle: "italic"
  }
});

const PickerBox = (title) => {
  return (
    
        {title}
    
  );
};

export default PickerBox;

这是组件中PickerBox的import语句

import PickerBox from "./PickerBox"; // reside in same folder

该dataSource状态来自于包含在每个条目中这样的布局JSON对象。

"c_node_name_scientific": "Centurio",
"c_syn_name": "wrinkle-faced bat",
"i_node_id": 27644,

模拟器中的Output只是标题，但是预期的输出是标题和下面的列表。

首先，您需要确保，如果您的renderItem方法像示例中那样使用带有花括号的粗箭头功能，则需要添加return语句，如下所示：

renderItem={({item}) => { return  }}

如果不使用花括号，则可以定义如下函数：

renderItem={({item}) => }

其次，确保数据是数组，而不是对象。根据反应本地文档中FlatList 数据道具的描述：

为了简单起见，数据只是一个简单的数组。如果要使用其他内容（如不可变列表），请直接使用基础VirtualizedList。

从您的问题看来，您似乎想遍历类似于以下对象的数组：

[
  {
    "c_node_name_scientific": "Centurio",
    "c_syn_name": "wrinkle-faced bat",
    "i_node_id": 27644
  },
  {
    "c_node_name_scientific": "xxx",
    "c_syn_name": "xxx",
    "i_node_id": 123
  },
  //...
]

如果是这种情况，只需将状态dataSource对象包装在如上所示的数组中即可。

如果您希望将数据作为类似于以下内容的对象传递：

{
  key1: {title: 'Title 1'},
  key2: {title: 'Title 2'}
  key3: {title: 'Title 3'}
}

您需要执行以下类似操作以使FlatList可以访问数据：

 
    // here `item` will be the Object's key. eg: "key1"
    
  }
/>

最后，如果Flatlist需要随着State更新而更新，则需要extraData={this.state}在propList中添加属性。根据FlatList文档：

通过将extraData = {this.state}传递给FlatList，我们确保当state.selected更改时，FlatList本身将重新呈现。如果不设置此道具，FlatList将不知道它需要重新渲染任何项目，因为它也是PureComponent，并且道具比较不会显示任何更改。