Как загрузить коллекцию пожарных в редукционный магазин?

Question

У меня проблемы с загрузкой подколлекции пожарного магазина в магазине редуксов.Я пытаюсь загрузить соответствующую вложенную коллекцию внутри дочернего компонента.

Структура компонента выглядит следующим образом:

Панель инструментов - Список проектов - Сводка проекта --comments

Я загрузил коллекцию с именем Проекты , используя firestoreConnect внутри компонента Dashboard, передавая данные в Список проектов Отображение данных в ПроектКраткое описание . комментарии является дочерним компонентом сводка проекта

Моя структура коллекции 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)

Ожидаемый результат:

* Хочу загрузить Проект Подборка коллекции с именем Комментарии

Фактический результат:

* Ошибка не возникает, но данные еще не загружены.

Заранее спасибо!

Answer 1

Есть вероятность, что вы просто не видите эту подгруппу. Если вы заглядываете в консоль браузера, перейдите на страницу Firebase> упорядочено> prjoects> комментарии вы должны увидеть массив ваших комментариев

Пример:

|-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,
  }
}

После подключения вы сможете использовать свои данные.