Javascript 什么'；我的公寓清单怎么了？自然反应

我的平面列表不适合我，请有人检查并给我一个解决方案

const data = [
    'hai', 'hloooo'
]

class HotelList extends Component {

    render() {

        console.log('data==========', data)

        return (
                
                <View style = {{flex: 1, height: '100%', width: '100%'}}>
                    <Text>Hai</Text>
                    <FlatList 
                        data = {data}
                        keyExtractor = {(item, index) => index.toString()}
                        renderItem = {itemData => {
                            console.log(itemData)
                            return (
                                <View style = {{width: '100%', height: 100, flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'yellow'}}>
                                    <Text>Holaaaaaa</Text>
                                </View>
                            )
                        }} 
                    />
                </View>
        )
    }
}

export default HotelList

const数据=[
“海”，“海”
]
类HotelList扩展组件{
render（）{
console.log（'data=============='，data）
返回(
海
index.toString（）}
renderItem={itemData=>{
console.log（itemData）
返回(
你好
)
}} 
/>
)
}
}
导出默认HotelList

基本上，您错过了一些关于如何在react native中使用平面列表的基本理论。见正式文件

解决方案： 为了使keyExtractor工作，您需要向数组中添加id

const data = [
  {
    id: "1",
    title: "First Item",
  },
  {
    id: "2",
    title: "Second Item",
  },
  {
    id: "3",
    title: "Third Item",
  },
];

class HotelList extends Component {
  render() {
    console.log("data==========", data);

    return (
      <View style={{ flex: 1, height: "100%", width: "100%" }}>
        <Text>Hai</Text>
        <FlatList
          data={data}
          keyExtractor={(item) => item.id}
          renderItem={(item) => {
            console.log(item);
            return (
              <View
                style={{
                  width: "100%",
                  height: 100,
                  flex: 1,
                  alignItems: "center",
                  justifyContent: "center",
                  backgroundColor: "yellow",
                }}
              >
                <Text>{item.title}</Text>
              </View>
            );
          }}
        />
      </View>
    );
  }
}

export default HotelList;

const数据=[
{
id:“1”，
标题：“第一项”，
},
{
id:“2”，
标题：“第二项”，
},
{
id:“3”，
标题：“第三项”，
},
];
类HotelList扩展组件{
render（）{
console.log（“数据==============”，数据）；
返回(
海
项目id}
renderItem={（项目）=>{
控制台日志（项目）；
返回(
{item.title}
);
}}
/>
);
}
}
导出默认HotelList；

所以基本上你错过了平面列表的一些基本概念