Невозможно повторить и передать «комментарии», как вложено в «публикацию» компоненту - PullRequest
0 голосов
/ 29 марта 2019

У меня есть «комментарии», вложенные в пост под названием «наблюдения» из Rails.Я передаю массив «наблюдений» в качестве опоры на SightingContainer, а затем на SightingCard.Это все отлично работает.Затем мне нужно добавить «комментарии» (комментарии можно комментировать) в той же карточке.Прямо сейчас я рассматриваю это как отдельную ветку от Приложения и отправляю массив 'наблюдений' (имеет вложенные комментарии) в CommentsContainer, а затем в CommentsCardCommentContainer я делаю 2 итерации, чтобы перейти к «комментариям».

Я новичок в React, поэтому, возможно, я не совсем правильно это реализовал.

My ComponentContainer принимает массив props.sightings:

import React from 'react';
import { Comment } from 'semantic-ui-react'
import CommentCard from '../components/CommentCard'


const CommentsContainer = props => {
  return (
    <div>
      {props.sightings && props.sightings.map(sighting => {
      return  sighting.comments.map((comment, idx) => {
        return <CommentCard key={idx} comment={comment} editComment={props.editComment}
          likeComment={props.likeComment} addComment={props.addComment}  currentUser={props.currentUser} deleteComment={props.deleteComment}/>
      })
    })
    }
    </div>
  )
};

export default CommentsContainer

Я получаю ошибку:


×
←→1 of 3 errors on the page
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Если кто-нибудь может подсказать мне лучший способосуществить это, пожалуйста, сообщите!

1 Ответ

0 голосов
/ 30 марта 2019

Так что, похоже, что в целом React плохо справляется с вложенными данными. Намного лучше иметь дело с этим в бэкэнде и посылать его как не вложенные данные, даже если у него есть belongs_to или полиморфное отношение.

...