我的 FlatList 有什么问题？ react-native

Question

我的 Flatlist 对我不起作用，有人请查看并给我一个解决方案

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

Answer 1

基本上你已经错过了一些关于如何在 react native 中使用平面列表的基本理论。 在此处查看官方文档

解决方案：

您需要将 id 添加到数组中才能使 keyExtractor 工作

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;