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

Question

我试图从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>
    )}
  />

Answer 1

我遇到了同样的问题，看来这个问题是对象名称的原因。 在下图中，您可以看到，只要您从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]);
        });

Answer 2

只需稍微修改@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 } ]

Answer 3

我遇到了这个错误，我有一个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) 。希望有一天能对某人有所帮助

Answer 4

我遇到了类似的问题，并将清单的数据保存在状态中。您必须确保状态中的数据是 list 而不是对象：

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

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

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