Попытка добавить к состоянию массив бросков Не удается прочитать свойство 'setState' из null

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 =>), второй был только с включенной и функцией с for, а третий - с той же функцией, которую я только что прокомментировал для for и сделал setState напрямую.

Answer 1

Вы неправильно устанавливаете контекст для функции, которая вызывает this.setState(), которую можно исправить одним из трех способов.

Контекст привязки

Ваша функция не имеет должной привязкиконтекст, который может использовать React.React извлекает функцию, поэтому без неявного контекста она будет неопределенной при вызове.Это можно исправить, используя функции-стрелки в конструкторе или явно связав его в конструкторе.Другой вариант - использовать функцию стрелок при рендеринге, , но в долгосрочной перспективе это потребляет больше ресурсов, может вызвать непредвиденное поведение и его следует избегать .

Связывание в конструкторе

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

Answer 2

В вашем конструкторе добавьте

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

Также я вижу еще одну проблему, обновите setState до следующего (избегайте мутаций)

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