【问题标题】：Trying to add to state array throws Cannot read property 'setState' of null尝试添加到状态数组抛出无法读取 null 的属性“setState”
【发布时间】：2019-03-02 10:27:36
【问题描述】：

我要做的是从 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。

【问题讨论】：

标签： javascript arrays reactjs firebase firebase-realtime-database

【解决方案1】：

在你的构造函数中添加

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

我还看到另一个问题，请将 setState 更新为关注（避免突变）

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

【讨论】：

谢谢，它成功了，只是另一个问题。我更新了 firebase 图像，因为当有新问题时，每个问题都有一个由 firebase 提供的密钥，所以我现在得到：对象作为 React 子级无效（找到：带密钥的对象 {-LNLVWCjXTOs6sDsTcM3}）。如果您打算渲染一组子项，请改用数组。
我在for中更新了，得到每个key，非常感谢。

【解决方案2】：

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

绑定上下文

您的函数没有 React 可以使用的正确绑定的上下文。 React 提取函数，因此如果没有隐式上下文，调用时它将是未定义的。这可以通过在构造函数中使用箭头函数或在构造函数中显式绑定来解决。另一种选择是在渲染时使用箭头函数but this uses more resources in the long run, can cause unexpected behavior and should be avoided。

构造函数中的绑定

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

【讨论】：