从React访问真实的数据库列表

我和 React 和 Realtime Database .

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

以及:

以下是相关代码:

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集合中创建一项的函数:

  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);
  };