2

我在 redux 商店中加载 firestore 子集合时遇到问题。我正在尝试在子组件中加载相应的子集合。

组件结构如下所示：

仪表板--项目列表--项目摘要--评论

我在 Dashboard 组件中使用 firestoreConnect加载了名为Projects的集合，将数据传递到Project 列表，将数据映射到Project Summary。评论是项目摘要的子组件

我的 Firestore 集合结构如下所示：

项目 --project1 --comments

仪表板：

class Dashboard extends Component {
  render() {
    const { projects, auth, notifications } = this.props
    if (!auth.uid) return <Redirect to='/signin' />
    return(
      <div className="dashboard container">
        <div className="row">
          <div className="col s12 m8 offset-m2 l8">
            <ProjectList projects={projects} />
          </div>
          <div className="col s12 offset-m1 hide-on-med-and-down l4">
            <Notification notifications={notifications} />
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  // console.log("ref: ",state)
  return {
    projects: state.firestore.ordered.projects,
    initials: state.firebase.profile.initials,
    auth: state.firebase.auth,
    notifications: state.firestore.ordered.notifications
  }
}

export default compose (
  connect(mapStateToProps),
  firestoreConnect([
    { collection: 'projects', orderBy: ['createdAt', 'desc'] },
    { collection: 'notifications', limit: 3, orderBy: ['time', 'desc'] }
  ])
)(Dashboard)

项目清单组件：

const ProjectList = ({ projects }) => {
  return(
    <div className="project-list section">
      {projects && projects.map((project) => {
        return(
          <div key={project.id}>
              <ProjectSummary project={project}/>
          </div>
        )
      })}
    </div>
  )
}

export default ProjectList

项目总结：

const ProjectSummary = ({ project }) => {
    return(
      <div className="card z-depth-0 project-summary show-up post">

        <div className="name">
          <div className="">
            <span className="btn btn-floating z-depth-0 black user-indicator">
              {project.authorFirstName && project.authorFirstName[0]}{project.authorSecondName && project.authorSecondName[0]}
            </span>
             <span> {project.authorFirstName {project.authorSecondName} </span>
             <span className="right options"> <i className="material-icons">more_vert</i> </span>
          </div>
        </div>

        <div className="card-image">
          <img src={project.imageUrl} alt="art" />
          <PostCredits />
        </div>

        <div className="card-reveal">
          <Comments id={project.id} />
        </div>

        <div className="card-content">
          <Link to={'/projectdetails/' + project.id} className="black-text">
            <p className="post-title"> {project.title} </p>
          </Link>
          <p className="grey-text lighten-3 load-comments activator"> Load comments </p>
          <p className="grey-text date-format">
            {project.createdAt && project.createdAt
              .toDate()
              .toLocaleDateString('indian', {
                year: "numeric", month: "short", day: "numeric"
            })}
          </p>
        </div>
        <div className="add-comment">
          <AddComment projectId={project.id} />
        </div>

      </div>
    )
}

export default ProjectSummary

评论：

const Comment = (props) => {
    return(
      <div>
        <div className="loaded-comments">
          <span className="card-title grey-text text-darken-4"> Comments <i className="material-icons right">close</i> </span>
          <p> <span className="commentor"> Joe </span>  </p>
        </div>
      </div>
    )
}

const mapStateToProps = (state, ownProps) => {
  console.log("state: ", state)
  return {

  }
}

export default compose (
  connect(mapStateToProps),
  firestoreConnect(props => {
    return [
      { collection: 'projects',
        doc: props.id,
        subcollections: [
          {
            collection: 'comments'
          }
        ]
      }
    ]
  })
)(Comment)

预期结果：

*想要加载名为Comments的项目集合的子集合

实际结果：

*没有发生错误，但仍然没有加载数据。

提前致谢！

4

1 回答 1

0

您可能只是看不到该子集合。如果您在浏览器控制台中查看，请导航到 firebase > ordered > prjoects > comments。你应该能够看到你的评论数组

例子：

|-firestore
|--ordered:
|---projects: Array(1)
|----0:
|-----id: *uid*
|------comments: Array(2)
|-------0: {*comment details*}
|-------1: {*comment details*}
|------length: 2
|-----__proto__: Array(0)

在您可以根据您的密钥映射您的数据之后。

const mapStateToProps = (state) => {
  return {
    projects: state.firestore.ordered.projects.comments,
  }
}

连接后，您将能够使用您的数据。

于 2019-05-26T04:30:07.347 回答