从 React 访问实时数据库列表

Question

我正在与 React 和 Realtime Database 合作。

以下是与此问题相关的 2 个主要数据库节点：

和：

相关代码如下：

class App extends React.Component {
  constructor(props) {
    super(props);
    firebase.initializeApp(config);

    this.state = {
      commandes: []
    };
  }

  componentDidMount() {
    this.getData();
  }

  getData = () => {
    let ref = firebase.database().ref("/");
    ref.on("value", snapshot => {
      const state = snapshot.val();
      this.setState(state);
    });
  };

  .....

  render() {
    const { commandes } = this.state;
    return (
      <React.Fragment>
        .....
              {commandes.map(item => (
                <div
                  key={item.name}
                  className="card float-left"
                  style={{ width: "18rem", marginRight: "1rem" }}
                >
                </div>
              .....
              ))}
        .....
      </React.Fragment>
    );
  }
}

它不起作用，这是我收到的错误：

TypeError: commandes.map is not a function

这就是我发帖的原因。我很乐意得到一些关于解决此问题的反馈或提示。

现在这里有一个重要的注意事项：当使用与上面相同的代码时，仅将 commandes 的 3 次出现更改为 developers，然后代码完美运行，如我所料列出集合 developers 中的项目。虽然我花了一些时间尝试一些事情来找出问题，但它不起作用。由于我没有更改代码（除了我刚才提到的），我假设不同之处在于集合之间，但我真的看不出是什么。

这是在 commandes 集合中创建一项的函数：

  sendCommande = item => {
    const orderTime = new Date(),
    orderKey = orderTime.getTime().toString(),
    orderOject = {
      name: item.name,
      price: item.price,
      dateTime: orderTime.toLocaleString(),
      status: 1,
      uid: orderKey
    }

    firebase.database()
    .ref("/commandes/"+orderKey)
    .set(orderOject);
  };

Answer 1

I assume the differencence is between the collections (i.e. the database nodes), but I can't really see what

原因是对于 developers 节点，子节点键的顺序是：0、1、2。 val() 方法将其解释为数组。

commandes 节点的子节点键不遵循序列：因此 val() 方法 return 是一个 JavaScript 对象（不是数组），因此 map().

的错误

请注意，某些子节点键如 1、2、4、6 也会 return 一个数组：val()方法检测一个序列 (1、2) 和 returns 一个数组，在索引 0、3 和 5 处有一些空元素。

从 React 访问实时数据库列表

Accessing Realtime DB lists from React

firebase

reactjs

firebase-realtime-database