@MarEeeeee

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

Привет, есть компонент реакта, в котором считывается информация из бд. Запрос к бд возвращает 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()
            })  
        })
      }


как правильно решить эту проблему?
  • Вопрос задан
  • 61 просмотр
Решения вопроса 1
@tehfreak
Чтобы сразу записать данные в state (в конструкторе компонента), эти данные должны быть сразу доступны, например, в props. Если необходимо выполнить асинхронную операцию и записать результат в state, то делать это нужно в componentDidMount:

class extends React.Component {
  async componentDidMount() {
    this.setState({
      data: (await dataRef.once('value')).val()
    })
  }
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
udjin123
@udjin123
PHP, Golang, React
Используйте await в componentDidMount, пример

const eventref = firebase.database().ref('lectures/' + "421452");
const snapshot = await eventref.once('value');
const value = snapshot.val();
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы