javascript - react : Pass Firebase Data Down Via Props

Question

我试图通过 props 将一些 Firebase 数据从一个组件向下传递到另一个组件，但它似乎不允许我在子组件中迭代 Firebase 数据。

App.js

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      games: []
    };
  }

  componentDidMount() {
    const gamesRef = firebase.database().ref('games').orderByKey();

    gamesRef.once('value', snap => {
      snap.forEach((childSnapshot) => {
        this.state.games.push(childSnapshot.val());
      })
    })
  }

  render() {
    return (
      <div className="App">
        <Games data={ this.state.games } />
      </div>
    );
  }
}

Games.js

class Games extends Component {
  componentDidMount() {
    console.log(this.props.data); // this logs successfully  
  }

  render() {
    return (
      <div className="container">
        <div className="Games flex flex-end flex-wrap">
          { this.props.data.map(function (game, i) {            
            return (
              <h1>{ game.title }</h1>
            )
          }) }
        </div>

      </div>
    );
  }
}

由于某些原因，我在尝试对 props.data 进行 map() 时遇到了问题。它肯定会传递到我的 Games 组件，因为它将 console.log(this.props.data) 与从 Firebase 返回的数据一起打印到控制台。

我是否必须等待我的 Firebase 数据解析后才能对其进行映射？如果是，我该怎么做？

感谢任何帮助。提前致谢!

Answer 1

我认为问题在于您的 App 类中的 componentDidMount。您正在使用

更新状态

this.state.games.push(childSnapshot.val());

你不应该那样做。状态应该只用 this.setState 更新(或者至少你应该使用 this.forceUpdate())，否则它不会重新渲染。相反，我建议做

componentDidMount() {
  const gamesRef = firebase.database().ref('games').orderByKey();
  let newGames;

  gamesRef.once('value', snap => {
    snap.forEach((childSnapshot) => {
      newGames.push(childSnapshot.val());
    })
  })

  this.setState({games: newGames});
}

这将导致 App 组件重新渲染，导致新数据作为 prop 传递给 Games 组件。