React Native Flatlist extracting

Question

这里有点缺乏经验。尝试使用 React Native Flatlist 渲染数据。

这是我的数据：

data = {
-LYIaWAxkQA38DAbC3By: {hours: "6", type: "Welding"}
-LYIab-Ys9WkUNHE2cqL: {hours: "2", type: "Hair Drying"
}

我正在尝试使用：

<FlatList 
  data=data
  renderItem={
    (item) => <Text>{item.type}</Text>
  } 
  keyExtractor={(item, index) => index.toString()}
/>

我希望能够创建一个能够使用每种类型和小时的组件。

我不断收到错误，"不变违规：试图获取超出范围索引 NaN 的帧">

感谢任何帮助。

Answer 1

尝试使用数组：

  const data = [
    {
       hours: "6", 
       type: "Welding",
       identifier: "-LYIaWAxkQA38DAbC3By",
       id: 1
    },
    {
       hours: "2", 
       type: "Hair Drying",
       identifier: "-LYIab-Ys9WkUNHE2cqL",
       id: 2
    }
  ]

  <FlatList 
    data=data
    renderItem={
    (item) => <Text>{item.type}</Text>
   }   
    keyExtractor={(item, index) => item.id.toString()}
  />

Answer 2

您是否正在使用 Firebase？ 如果是，您可以使用

componentDidMount(){
   this._convert();
  }
  _convert = () => {
   let ALL_DATA = this.state.data;
   let CONVERTED_DATA = [];
   ALL_DATA.forEach( (individu_Items) => {
   CONVERTED_DATA.push(individu_Items)
   }
    this.setState({flatlist_data: CONVERTED_DATA})
    }

Answer 3

在数组中转换对象：

data = Object.keys(data).map((key) => data[key]));