gpt4 book ai didi

javascript - 如何使用 id React Js 和 Firebase 显示数据

转载 作者:行者123 更新时间:2023-12-02 22:14:40 26 4
gpt4 key购买 nike

我正在开发一个项目,我想显示我的 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;


我的数据:enter image description here

我只想要选中复选框的 id 的“地址” enter image description here

谢谢

错误: enter image description here

最佳答案

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

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

关于javascript - 如何使用 id React Js 和 Firebase 显示数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59429430/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com