Ключ объекта не отображает компонент React с использованием базы данных Firebase

Question

Я пытаюсь визуализировать компонент, но это не рендеринг.Я использую Objectkey для обхода базы данных реального времени firebase. ПОКАЗЫВАЕТ ДАННЫЕ В КОНСОЛЕ, НО НЕ ОТОБРАЖАЕТ Компонент.Функции недопустимы как дочерние элементы React.Это может произойти, если вы вернете компонент вместо рендера.Или, может быть, вы хотели вызвать эту функцию, а не возвращать ее.

class UserPost extends React.Component {
render() {
return (
  <div className="userpost">
    {firebase
      .database()
      .ref()
      .child("post")
      .on("value", snapshot => {
        Object.keys(snapshot.val()).map((item, i) => (
          <Post
            key={i}
            title={snapshot.val()[item].title}
            username="Edward"
            image={snapshot.val()[item].post_img}
            comment={
              Object.getOwnPropertyNames(
                data.comments[snapshot.val()[item].comments]
              ).length
            }
            likes={
              snapshot.val()[item].likes
                ? data.likes[snapshot.val()[item].likes].length
                : null
            }
          />
        ));
      })}
  </div>
);

}

Answer 1

Метод render не рекомендуется для подписки.Предпочитайте использовать методы жизненного цикла React (например, componentDidMount) для этого вида кода:

class UserPost extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: {}
    }
  }

  componentDidMount() {
    firebase
    .database()
    .ref()
    .child("post")
    .on("value", snapshot => {
      this.setState({ posts : snapshot.val()})
    })
  }

  render() {
    return (
      <div className="userpost">
        {Object.keys(this.state.posts).map((item, i) => (
              <Post
                key={i}
                title={this.state.posts[item].title}
                username="Edward"
                image={this.state.posts[item].post_img}
                comment={
                  Object.getOwnPropertyNames(
                    data.comments[this.state.posts[item].comments]
                  ).length
                }
                likes={
                  this.state.posts[item].likes
                    ? data.likes[this.state.posts[item].likes].length
                    : null
                }
              />
            ))}
        </div>
      );
  }
}