У меня есть «комментарии», вложенные в пост под названием «наблюдения» из Rails.Я передаю массив «наблюдений» в качестве опоры на SightingContainer
, а затем на SightingCard
.Это все отлично работает.Затем мне нужно добавить «комментарии» (комментарии можно комментировать) в той же карточке.Прямо сейчас я рассматриваю это как отдельную ветку от Приложения и отправляю массив 'наблюдений' (имеет вложенные комментарии) в CommentsContainer
, а затем в CommentsCard
.В CommentContainer
я делаю 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.
Если кто-нибудь может подсказать мне лучший способосуществить это, пожалуйста, сообщите!