2 回答

TA貢獻(xiàn)1891條經(jīng)驗(yàn) 獲得超3個(gè)贊
您沒(méi)有從組件中渲染任何內(nèi)容
在處理數(shù)組之后,理想情況下,您應(yīng)該將其設(shè)置為會(huì)導(dǎo)致組件重新渲染的狀態(tài),并且如果您從如下?tīng)顟B(tài)渲染序列,它將在加載后顯示。單擊按鈕后,數(shù)字列表函數(shù)將執(zhí)行并使用數(shù)據(jù)設(shè)置狀態(tài),并將其映射和顯示。
根據(jù)您當(dāng)前的代碼,您只需映射并返回未在任何地方使用的項(xiàng)目,因此您應(yīng)該遵循以下模式。
class Serials extends Component {
state = {
serials: [],
};
numberList() {
const uid = this.state.user.uid;
const serialRef = db.ref(uid + '/serials');
serialRef.on('value', (serial_numbers) => {
const serials = [];
serial_numbers.forEach((serial_number) => {
serials.push({ s: serial_number.val() });
});
this.setState({ serials: serials });
});
}
render() {
return (
<div>
<button onClick={this.numberList}>Cards</button>
<div>
{this.state.serials.map((number) => (
<Card>
<Card.Body>{number.s.serial}</Card.Body>
</Card>
))}
</div>
</div>
);
}
}

TA貢獻(xiàn)1776條經(jīng)驗(yàn) 獲得超12個(gè)贊
serials應(yīng)該是組件狀態(tài)的一部分,由單擊處理程序更新,并映射到方法中render。
state = {
serials: [],
};
...
numberList() {
const { user: { uid } } = this.state;
const serialRef = db.ref(uid + "/serials");
serialRef.on("value", (serial_numbers)=> {
this.setState({
serials: serial_numbers.map(s => ({ s: s.val() })),
});
});
}
...
render () {
const { serials } = this.state;
return (
<div>
<button onClick={this.numberList}>Cards</button>
<div>
{serials.map((number) => (
<Card>
<Card.Body>{number.s.serial}</Card.Body>
</Card>
))}
</div>
</div>
)};
}
添加回答
舉報(bào)