Установка состояния из базы данных Firebase в реагировать JS - PullRequest
Новая
       25

Установка состояния из базы данных Firebase в реагировать JS

1 голос
/ 13 марта 2019

Я пытаюсь научиться реагировать, и я создаю веб-приложение с базой данных Firebase и аутентификацией и фильмом db api.Я могу сделать так, чтобы пользователь щелкнул фильм и добавил этот фильм в свой список «отправляет информацию об этом фильме в firebase».сейчас я пытаюсь получить эту информацию, и мне это удается, но мой код в настоящее время заставляет браузер блокироваться и аварийно завершает работу, а журнал продолжает бесконечно, и мне нужно принудительно завершить работу.Я не уверен, где я иду не так?Когда я помещаю код, который находится в рендере, в конструктор или в componentDidMount, this.props.user возвращает ноль.Я в замешательстве: (

конструктор app.js

передача состояния компоненту наблюдения

, вот код: 

import React, { Component } from 'react'
import firebase from '../config/Firebase';

import { Container } from 'react-bootstrap';

import WatchlistMovie from './WatchlistMovie';

export default class Watchlist extends Component {
  constructor(props){
    super(props);
    this.state = {
      movies: [],
    }
  }

  render() {

    const movieRef = firebase.database().ref(`watchlist/${this.props.user}`);

    movieRef.on("value", snapshot => {
      let movies = snapshot.val();

      console.log(movies);

      let newState = [];

      for(let movie in movies){
        newState.push({
          id: movies[movie].id,
          title: movies[movie].title,
          rating: movies[movie].rating,
          poster: movies[movie].poster
        });
      }

      this.setState({
        movies: newState
      });

      console.log(this.state.movies);

    });


    return (
      <div>
        <Container>
            <WatchlistMovie
              ... send data from firebase to this individual movie component
            />
        </Container>
      </div>
    )
  }
}

1 Ответ

1 голос
/ 13 марта 2019

render() {...} не место для получения данных.Переместите его на componentDidMount, как показано ниже: 


export default class Watchlist extends Component {
  constructor(props){
    super(props);
    this.state = {
      movies: [],
    }
  }

  componentDidMount() {
    const movieRef = firebase.database().ref(`watchlist/${this.props.user}`);

    movieRef.on("value", snapshot => {

      // I keep your logic here
      let movies = snapshot.val();

      console.log(movies);

      let newState = [];

      for(let movie in movies){
        newState.push({
          id: movies[movie].id,
          title: movies[movie].title,
          rating: movies[movie].rating,
          poster: movies[movie].poster
        });
      }

      this.setState({
        movies: newState
      });



    });
  }

  render() {

    const { movies } = this.state;


    return (
      <div>
        <Container>
            <WatchlistMovie
              ... send data from firebase to this individual movie component
            />
        </Container>
      </div>
    )
  }
}
...