对象键未使用 firebase 数据库呈现 React 组件

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>
      );
  }
}