reactjs - setState 不使用 firebase 对象更新数组
问题描述
所以我遇到的问题是该setState
方法似乎不想更新我的数组状态questions
。但是当我使用console.log(returnArr)
控制台时,我会从 firebase 打印我想要的项目。
我做错了什么?
export default class App extends React.Component {
constructor() {
super();
this.state = {
questions: [],
current_question: 0
};
}
componentDidMount() {
var rootRef = firebase.database().ref();
var ref = rootRef.child("Geography");
var returnArr = [];
ref
.once("value")
.then(function(snapshot) {
snapshot.forEach(function(childSnapshot) {
var item = childSnapshot.val();
item.key = childSnapshot.key;
if (item.key === "2") {
returnArr.push(item.Question);
setState = () => ({
questions: returnArr
});
console.log(returnArr);
}
});
})
.catch(error => {
console.log(error);
});
}
render() {
// ...
}
}
解决方案
setState
是您应该调用的函数,而不是您应该为其分配新值的对象。
如果要this
在 firebase 回调函数中使用,则必须使用bind
该函数this
或使用箭头函数。您很可能希望在处理完整个快照后将阵列设置为状态。
例子
class App extends React.Component {
// ...
componentDidMount() {
firebase
.database()
.ref()
.child("Geography")
.once("value")
.then(snapshot => {
const questions = [];
snapshot.forEach(childSnapshot => {
const item = childSnapshot.val();
item.key = childSnapshot.key;
if (item.key === "2") {
questions.push(item.Question);
}
});
this.setState({ questions });
})
.catch(error => {
console.error(error);
});
}
// ...
}
推荐阅读
- javascript - 按键合并json文件中的2个对象数组
- java - 反应原生推送通知更改图形
- visual-studio - 无法从 Visual Studio 启动 gdb 以在 Windows 上的 Linux 子系统中远程调试 Linux C++ 项目
- python - 如何测试设置和检查取决于未经测试的方法的方法?
- javascript - javascript中算法的重构求解
- mongodb - Mongoose 在子文档上将 _id 重命名为 id
- php - 将 PHP 变量传递到简码中
- google-maps - 如何从纬度和经度中提取位置名称
- ios - Erreur 在 IOS 设备上运行 cordoba
- amazon-web-services - Redis 自动缩放 Ec2