试图获取超出范围索引 NaN 的框架（实时数据库）答案

【问题标题】：Tried to get frame for out of range index NaN (realtime database)试图获取超出范围索引 NaN 的框架（实时数据库）
【发布时间】：2018-07-21 23:58:18
【问题描述】：

我正在尝试从 firebase 数据库中渲染一些行，我收到了这个错误：

TaskQueue：任务错误：不变违规：试图获取帧对于超出范围的索引 NaN

  const { currentUser } = firebase.auth();
    var userfavorites = firebase.database().ref(`/users/${currentUser.uid}/favorites/`);
    userfavorites.once('value').then(snapshot => {
      this.setState({ userfav: snapshot.val() })
    })

...

  <FlatList
    data={this.state.userfav}
    renderItem={({ item }) => (
      <Text>{item.favdata}</Text>
    )}
  />

【问题讨论】：

标签： reactjs firebase react-native firebase-realtime-database

【解决方案1】：

我遇到了这个错误，我有一个 PHP 后端并试图将 json_encoded 数据放入 FlatList。

问题： REST 端点正在返回一个对象，例如

{"Total_Excavator":2,"Active_Excavator":2,"Total_load":6804}

解决方案：修复它以返回一个数组而不是例如

[{"Total_Excavator":2,"Active_Excavator":2,"Total_load":6804}]

注意方括号。 我用$data[] = json_encode($excavatorArray) 代替 $data = json_encode($excavatorArray) .希望有一天它对某人有所帮助

【讨论】：

解决了我的问题。我也将一个对象传递给一个平面列表。谢谢！

【解决方案2】：

我有同样的问题，似乎这个问题是对象名称的原因。在下图中，您可以看到，一旦您从 Firebase 端点获取快照，它就会带有 React Native 无法识别的 id。并且反应就像它是空的obj一样。

您所要做的就是在获取对象后映射对象的项目，如下例所示，

const fbObject = snap.val();
const newArr = [];
Object.keys(fbObject).map( (key,index)=>{
    console.log(key);
    console.log("||");
    console.log(index);
    newArr.push(fbObject[key]);
});

【讨论】：

如果我没记错的话，你的代码和const newArr = Object.values(fbObject)一样。

【解决方案3】：

只是对@mert 的答案稍作修改。 JavaScript 的map 操作符返回一个数组；因此，无需将 push 元素添加到 newArr 上。此外，新数组的元素将缺少独特的 Firebase id。所以，它应该被添加到数组元素中。

const fbObject = snapshot.val();
const newArr = Object.keys(fbObject).map((key) => {
  fbObject[key].id = key;
  return fbObject[key];
});

你最终会得到一个这样的 newArray：

[
  {
    "id": "12345",
    "name": "Jane Doe",
    "age": 18
  },
  {
    "id": "23456",
    "name": "John Smith",
    "age": 27
  }
]

【讨论】：

【解决方案4】：

我遇到了类似的问题，并将平面列表的数据保存在状态中。你必须确保状态中的数据是一个列表而不是一个对象：

this.state = {
    ...,
    data: [], // <-- wrap your flatlist's data in there
}

在更改数据/状态时，请始终使用回调函数在之后执行某些操作以保持 UI 同步：

this.setState({..., data}, () => yourCallback())

【讨论】：