尝试添加到状态数组引发无法读取null的属性“ setState”

Question

我要做的是从firebase那里获得一系列问题，而我确实做到了，就像console.logs所显示的一样。

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

我也做了一件事，尽管我不知道是否是出于其他原因，我还是尝试了

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);
    }

如您所见，我尝试了三件事。第一个是带有reference.on（vale，snap =>），第二个是带有on和一个带有for的函数，第三个是在同一个函数中，我刚刚评论了for并直接执行setState。

Answer 1

在构造函数中添加

this.gotData = this.gotData.bind(this)

我还看到另外一个问题，请将setState更新为以下内容（避免发生突变）

this.setState({ preguntas: [...this.state.preguntas].concat(preguntasFirebase)});

Answer 2

您为调用this.setState()的函数设置了不正确的上下文，可以通过以下三种方法之一对此进行补救。

绑定上下文

您的函数没有React可以使用的绑定上下文。 React提取函数，因此如果没有隐式上下文，则在调用时它将是未定义的。这可以通过在构造函数中使用箭头函数或在构造函数中显式绑定它来补救。另一种选择是在渲染[RFC4918], Section 11.2处使用箭头功能。

绑定到构造函数中

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)
}