【问题标题】:How to display data with id React Js and Firebase如何使用 id React Js 和 Firebase 显示数据
【发布时间】:2020-04-13 05:08:21
【问题描述】:

我正在做一个项目,我想显示我的 firebase 数据库中的一些数据,

我可以显示其中的一些,但我想在一个框上显示我的“listClients”的其余数据,链接到带有 id 的复选框。

listClients.js 这是我从数据库映射数据的地方

import React, { Component } from "react";
import * as firebase from "firebase";
import { Table, InputGroup } from "react-bootstrap";
class ListClients extends React.Component {
  state = {
    loading: true
  };

  componentWillMount() {
    const ref = firebase.database().ref("listClients");
    ref.on("value", snapshot => {
      this.setState({ listClients: snapshot.val(), loading: false });
    });
  }

  render() {
    if (this.state.loading) {
      return <h1>Chargement...</h1>;
    }

    const clients = this.state.listClients.map((client, i) => (
      <tr key={i}>
        <td>
          <input id={client.id} type="checkbox" onChange={this.cbChange} />
        </td>
        <td>{client.nom}</td>
        <td>{client.prenom}</td>
      </tr>
    ));
    const clientsAdresses = this.state.listClients.map((clientAdresse, i) => (
      <tr key={i}>
        <td id={clientAdresse.id}>{clientAdresse.adresse}</td>
      </tr>
    ));

    return (
      <>
        <Table className="ContentDesign" striped bordered hover>
          <thead>
            <tr>
              <th></th>

              <th>First Name</th>
              <th>Last Name</th>
            </tr>
          </thead>
          <tbody>{clients}</tbody>
        </Table>

        <Table className="ContentDesign" striped bordered hover>
          <thead>
            <tr>
              <th>Adresse : </th>
            </tr>
          </thead>


          <tbody>{clientsAdresses}</tbody>


        </Table>
      </>
    );
  }
}

export default ListClients;


我的数据:

我只想要选中复选框的 id 的“地址”

谢谢

错误:

【问题讨论】:

  • 该错误是另一个问题。当您尝试在 React 中显示对象时,您会收到该错误。在尝试显示它之前,您需要将您的回复分开。要跟踪检查的内容,请谷歌“受控组件”并查看是否有帮助:stackoverflow.com/questions/39120007/…

标签: javascript reactjs firebase


【解决方案1】:

要从数据库中检索地址,请使用以下代码:

componentWillMount() {
const ref = firebase.database().ref("listClients");
    ref.on("value", snapshot => {
       snapshot.forEach((subSnap) => {
      let address = subSnap.val().adresse;
      });
    });
  }

首先添加对节点listClients的引用,使用forEach可以迭代并检索adresse


如果你想根据id获取adresse,那么可以使用查询:

const ref = firebase.database().ref("listClients").orderByChild("id").equalTo(0);

【讨论】:

猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-09-26
  • 2020-04-30
  • 2019-10-12
  • 2019-09-26
  • 2018-07-13
  • 1970-01-01
相关资源
最近更新 更多