2 回答

TA貢獻1891條經驗 獲得超3個贊
您沒有從組件中渲染任何內容
在處理數組之后,理想情況下,您應該將其設置為會導致組件重新渲染的狀態,并且如果您從如下狀態渲染序列,它將在加載后顯示。單擊按鈕后,數字列表函數將執行并使用數據設置狀態,并將其映射和顯示。
根據您當前的代碼,您只需映射并返回未在任何地方使用的項目,因此您應該遵循以下模式。
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貢獻1776條經驗 獲得超12個贊
serials應該是組件狀態的一部分,由單擊處理程序更新,并映射到方法中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>
)};
}
添加回答
舉報