Javascript 试图添加到状态数组抛出无法读取属性';设置状态';空的

Javascript 试图添加到状态数组抛出无法读取属性';设置状态';空的,javascript,arrays,reactjs,firebase,firebase-realtime-database,Javascript,Arrays,Reactjs,Firebase,Firebase Realtime Database,我要做的是从firebase那里得到一系列问题,我确实得到了,正如console.log所显示的那样 唯一的问题是,当我试图将该数组添加到我的状态“preguntas”时,我最初将其设置为null,然后将其更改为[],认为可能是这样。我也尝试过康卡特和其他我发现的东西 有一件事我也做了,虽然我不知道是不是因为另一个原因,我试过了 preguntasRef.on('value', snap => ... 只是为了得到同样的结果。但这可能是因为我试图将数组设置为我的状态 基本上,我不知道我是

我要做的是从firebase那里得到一系列问题,我确实得到了,正如console.log所显示的那样

唯一的问题是,当我试图将该数组添加到我的状态“preguntas”时,我最初将其设置为null,然后将其更改为[],认为可能是这样。我也尝试过康卡特和其他我发现的东西

有一件事我也做了,虽然我不知道是不是因为另一个原因,我试过了

preguntasRef.on('value', snap => ...
只是为了得到同样的结果。但这可能是因为我试图将数组设置为我的状态

基本上,我不知道我是否在某个时候得到了答案,只是实现了错误,所以我仍然无法将我从firebase获得的信息添加到我的状态

(图像更新,之前的图像没有问题键,因为问题也从应用程序上传)。 这是Firebase中的数据库:

这是我的密码:

constructor(props) {
        super(props);

        this.state= {
            preguntas: [],
            ponenteSelect: this.props.match.params.id,
            idOrador: this.props.location.state
        }
    }

    componentWillMount(){
        var preguntasRef = firebase.database().ref(this.state.idOrador).child("preguntas");
        preguntasRef.on('value', this.gotData, this.errData);
        /*preguntasRef.on('value', snap =>{
            this.setState({
                preguntas: snap.val()
            });
        });*/
    }

    gotData(data){
        let preguntasFirebase = data.val();
        console.log(preguntasFirebase);
        if (preguntasFirebase !== null) {
            this.setState({ preguntas: this.state.preguntas.concat(preguntasFirebase)});
            //this.setState({ preguntas: [...this.state.preguntas, ...preguntasFirebase]});

            //console.log(`Json preguntas ${jsonPregs}`);
            /*let keys = Object.keys(preguntas);
            for (let i=0; i<keys.length;i++){
                let k = keys[i];
                let pregunta = preguntas[k].pregunta;
                conjuntoPregs.push(pregunta);
            }*/
        }
    }
    errData(err){
        console.log('Error!', err);
    }
构造函数(道具){
超级(道具);
此。状态={
preguntas:[],
PonentSelect:this.props.match.params.id,
idOrador:this.props.location.state
}
}
组件willmount(){
var preguntasRef=firebase.database().ref(this.state.idOrador).child(“preguntas”);
preguntasRef.on('value',this.gotData,this.errData);
/*preguntasRef.on('value',snap=>{
这是我的国家({
preguntas:snap.val()
});
});*/
}
gotData(数据){
让preguntasFirebase=data.val();
console.log(pregunsfirebase);
if(pregunstfirebase!==null){
this.setState({preguntas:this.state.preguntas.concat(preguntasFirebase)});
//this.setState({preguntas:[…this.state.preguntas,…preguntasFirebase]});
//log(`Json preguntas${jsonPregs}`);
/*设keys=Object.keys(preguntas);

对于(设i=0;i),第二个函数正好是on,一个函数是for,第三个,在同一个函数中,我刚刚注释了for并直接执行了setState。

在构造函数中添加

this.gotData = this.gotData.bind(this)
此外,我还看到一个问题,请将setState更新为以下内容(避免突变)


在构造函数中添加

this.gotData = this.gotData.bind(this)
此外,我还看到一个问题,请将setState更新为以下内容(避免突变)


您未正确设置调用
this.setState()
的函数的上下文,该函数可以通过以下三种方式之一进行修正

绑定上下文 您的函数没有React可以使用的正确绑定上下文。React提取函数,因此如果没有隐式上下文,调用时将无法定义该函数。可以通过在构造函数中使用箭头函数或在构造函数中显式绑定来解决此问题。另一个选项是在渲染时使用箭头函数

构造函数中的绑定 在构造函数中使用arrow函数绑定
您未正确设置调用
this.setState()
的函数的上下文,该函数可以通过以下三种方式之一进行修正

绑定上下文 您的函数没有React可以使用的正确绑定上下文。React提取函数,因此如果没有隐式上下文,调用时将无法定义该函数。可以通过在构造函数中使用箭头函数或在构造函数中显式绑定来解决此问题。另一个选项是在渲染时使用箭头函数

构造函数中的绑定 在构造函数中使用arrow函数绑定
谢谢,这很有效,只是另一个问题。我更新了firebase图像,因为当出现新问题时,每个问题都有firebase提供的密钥,所以我现在得到:对象作为React子对象无效(找到:具有密钥的对象{-LNLVWCjXTOs6sDsTcM3})。如果要呈现子对象集合,请改用数组。我在for中更新了,以获取每个键,非常感谢。谢谢,这很有效,只是另一个问题。我更新了firebase图像,因为当出现新问题时,每个问题都有firebase提供的键,因此我现在得到:对象作为React子对象无效(找到:具有键的对象{-LNLVWCjXTOs6sDsTcM3})。如果要呈现子项集合,请改用数组。我在for中更新了以获取每个键,非常感谢。
constructor(props) {
    super(props);

    this.state= {
        preguntas: [],
        ponenteSelect: this.props.match.params.id,
        idOrador: this.props.location.state
    }
    this.gotData = this.gotData.bind(this); // gives it an explicit this context to be reused
}
constructor(props) {
    super(props);

    this.state= {
        preguntas: [],
        ponenteSelect: this.props.match.params.id,
        idOrador: this.props.location.state
    }
    this.gotData = (data) => {...} // by putting it here it will be bound to the constructor instance it's created in(lexical)
}