我正在使用以下代码成功呈现Firebase数据库查询。
class WeightHistoryScreen extends Component {
componentWillMount = () => {
this.setState({ data: [] });
this.getData();
}
getData(){
const { currentUser } = firebase.auth();
firebase
.database()
.ref(`/users/${currentUser.uid}/data/`)
.orderByKey()
.on('child_added', snap => {
var data = this.state.data;
data.push({ key: snap.key, weight: snap.val().Weight });
this.setState({ data: data });
})
}
renderRow = ({item}) => {
return (
<View style={[styles.card, styles.cardBorder]}>
<Text>
{item.key}
</Text>
<Text style={[styles.textRight]}>
{item.weight} LBS
</Text>
</View>
)
}
render() {
return (
<View style={[styles.container]}>
<FlatList
data={this.state.data}
renderItem={this.renderRow}
/>
</View>
);
}
}
但是,在同一会话中第二次访问屏幕时出现错误。请参见下面的截图。
您正在错误的地方初始化您的州,尝试这样做
class WeightHistoryScreen extends Component {
state={data:[]}
componentWillMount = () => {
this.getData();
}
你的代码有一些问题应该修复我已经添加了代码注释并更新了代码。
在构造函数中初始化数据数组
constructor(){
this.state={
data:[]
}
}
//Remove setState from here
componentWillMount = () => {
this.setState({ data: [] });
this.getData();
}
getData(){
const { currentUser } = firebase.auth();
firebase
.database()
.ref(`/users/${currentUser.uid}/data/`)
.orderByKey()
.on('child_added', snap => {
this.setState(prevState=>({data: [...prevState.data,{ key: snap.key, weight: snap.val().Weight }]}));
}) }