React:使用setState竞争条件从firebase获取数据并存储
React:使用setState竞争条件从firebase获取数据并存储
提问于 2018-06-09 04:36:27
在从Firebase中读取数据时，我似乎遇到了setState的某种竞争条件。在加载组件时，将为与表clients中的客户端记录一样多的客户端记录调用侦听器child_added，但只有最后一个客户端记录实际存储在使用setState的状态中。我知道这与setState中的延迟有关，因为它只在周期结束时才起作用，所以多个setState调用存在竞争条件。如何修复此问题，以使所有客户端记录都正确存储在this.state.clients中
class ClientsTable extends React.Component {
constructor(props) {
super(props);
this.state = {
open: false,
clients: [],
};
}
componentWillMount(){
let clientsRef = fire.database().ref('clients').orderByKey().limitToLast(100);
clientsRef.on('child_added', snapshot => {
let client = snapshot.val();
client.id = snapshot.key
this.setState({ clients: [client].concat(this.state.clients) })
})
}
}回答 1
Stack Overflow用户
发布于 2018-06-09 05:34:02
不应该有任何争用条件，因为setState()在每次调用时都会将更改入队，在这种情况下，每个由child_added事件产生的client快照都包括现有的client和添加的新client。
真正的问题可能只是你的setState()语法，它可能每次都会改变/恢复this.state.clients。相反，可以尝试使用spread syntax ...将client对象附加到this.state.clients，并以不可变的方式更新/合并this.state。
class ClientsTable extends React.Component {
constructor(props) {
super(props);
this.state = {
open: false,
clients: []
};
}
componentWillMount(){
const clientsRef = fire.database().ref('clients').orderByKey().limitToLast(100);
clientsRef.on('child_added', snapshot => {
const client = { ...snapshot.val(), id: snapshot.key };
this.setState({
...this.state,
clients: [...this.state.clients, client]
});
});
}
}使用personal Firebase项目，我能够将每个项目转换为等同于this.state.clients的内容，并相应地在componentDidMount或componentWillMount中显示这些内容。如果你愿意，你可以创建一个模拟数据/结构与你的实际项目相匹配的虚拟Firebase项目，如果它仍然不能工作，就生成一个StackBlitz。
希望这能有所帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50768061
复制相关文章
相似问题