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

Posted 2023-02-22

【中文标题】试图获取超出范围索引 NaN 的框架（实时数据库）

【英文标题】：Tried to get frame for out of range index NaN (realtime database)

【发布时间】：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>
    )
  />

【参考方案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())