Как записать данные из fireBase в state компонента React?

Question

[MarEeeeee]

Привет, есть компонент реакта, в котором считывается информация из бд. Запрос к бд возвращает promise. Я не понимаю как информацию из бд сразу же записать внутрь this.state.

var currentData = {
    idLecture: "421452",
    nameLecture: "Advansed React",
    numberGoodMarks: 42,
    numberSatisfactoryMarks: 356,
    numberBadMarks: 14
}



class EvaluationLecture extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            lecture:{
                idLecture: currentData.idLecture,
                nameLecture: currentData.nameLecture,
                numberGoodMarks: currentData.numberGoodMarks,
                numberSatisfactoryMarks: currentData.numberSatisfactoryMarks,
                numberBadMarks: firebase.database().ref('lectures/' + "421452").once('value', (data)=>{
                    return  data.val().numberBadMarks; // очевидно ошибочно решение, но смысл должен быть таким. из БД сразу в стейт
                })
            },
            isVoted: localStorage.getItem(currentData.idLecture) === null ? false : true,
        }
      }

Был такой вариант решения:

componentDidMount(){
        firebase.database().ref('lectures/' + "421452").once('value', (data)=>{
            this.setState({

            })  
        })
    }

но хотелось бы сразу записать данные в state, а не перезаписывать их в момент маунта.
Еще пробовал запихнуть setState внутрь constructor, но мне кажется так тоже неправильно.

class EvaluationLecture extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            lecture:{},
            isVoted: localStorage.getItem(currentData.idLecture) === null ? false : true,
        }
        firebase.database().ref('lectures/' + "421452").once('value', (data)=>{
            this.setState({
                lecture: data.val()
            })  
        })
      }

как правильно решить эту проблему?

Comments

[n1ksON]

Если бы использовали функциональные компоненты, смог бы подсказать

Answer 1

[tehfreak]

Чтобы сразу записать данные в state (в конструкторе компонента), эти данные должны быть сразу доступны, например, в props. Если необходимо выполнить асинхронную операцию и записать результат в state, то делать это нужно в componentDidMount:

class extends React.Component {
  async componentDidMount() {
    this.setState({
      data: (await dataRef.once('value')).val()
    })
  }
}