手动更改数据库中的条目时反应本机和firebase出错答案

【问题标题】：Error with react native and firebase when changing entries in DB manually手动更改数据库中的条目时反应本机和firebase出错
【发布时间】：2018-03-28 20:22:42
【问题描述】：

我正在从我的 firebase 数据库中检索数据，这一直运行良好，但是当我手动更改数据库中的条目时，我收到以下错误：

Invariant Violation: Tried to get frame for out of range index NaN

方法拉取数据

listenForItems(itemsRef) {
 itemsRef.on('value', snapshot => {
  this.setState({ data: snapshot.val() });
  console.log(this.state.data);
    });
  }

控制台正确显示从 firebase 检索到的新更新对象。

渲染方法

  render() {
    return (
      <FlatList
        data={this.state.data}
        renderItem={({ item }) => (
          <ListItem
            title={item.title}
          />
        )}
        keyExtractor={(item, index) => index.toString()}
      />
      );
    }

数据库中的项目以前是：

但是，当结构如下图时：

我收到错误消息。

注意：如果我将值改回来，错误就会消失。谁能告诉我这是怎么回事？

【问题讨论】：

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

【解决方案1】：

正如post 中所述：

“Firebase 没有对数组的原生支持。如果你存储一个数组，它真的被存储为一个以整数作为键名的“对象”。

总结：

// when we send this
['hello', 'world']
// Firebase stores this
{0: 'hello', 1: 'world'}

signposts 是一个对象数组。由于 Firebase 本身不支持数组，它所做的就是创建一个以整数索引作为键名的对象，以便在使用时表现得像一个数组。

因此，通过将 0 更改为 test1，您尝试将字符串 (test1) 设置为数组索引，该索引应该是一个数字，这就是您收到 out of range index NaN 错误的原因。

【讨论】：