【发布时间】: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;
谢谢
【问题讨论】:
-
该错误是另一个问题。当您尝试在 React 中显示对象时,您会收到该错误。在尝试显示它之前,您需要将您的回复分开。要跟踪检查的内容,请谷歌“受控组件”并查看是否有帮助:stackoverflow.com/questions/39120007/…
标签: javascript reactjs firebase