Не могу передать массив l oop компоненту

Question

Здравствуйте, дорогой, переполнение стека, я только что запустил веб-сайт Gatsby, но у меня возникают проблемы с циклическим просмотром массива, переданного компоненту.

Что я пытаюсь сделать:

У меня есть страница Gatsby с именем blog. js, на этой странице я показываю заголовки блогов, полученные с помощью GraphQL. Используя al oop прямо в блоге. js page Я вижу все заголовки.

Мой l oop внутри блога. js выглядит так

      <div> 
            <h1>Blogg data</h1>
            {data.posts.edges.map (({ node }) => (
                <p>{node.title}</p>
            ))}
        </div>  

Получает данные из следующего запроса GraphQL

export const query = graphql`
  query BlogPageQuery {
    posts: allSanityPost(
      limit: 12
      sort: { fields: [publishedAt], order: DESC }
    ) {
      edges {
        node {
          id
          publishedAt
          mainImage {
            asset {
              _id
            }
            alt
          }
          title
          _rawExcerpt
          slug {
            current
          }
        }
      }
    }
  }
`

Вместо создания предварительный просмотр сообщений в блоге. js Вместо этого я хочу использовать компонент для этого. Я создал компонент с именем BlogPostPreviewGrid и назвал его так из блога. js

<BlogPostPreviewGrid blogPosts={data}/>

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

const BlogPostPreviewGrid = blogPosts => {
    return (
    <div>   
     <p>Here be component data</p>

  {console.log(blogPosts)}
     {blogPosts.posts.edges.map (({ node }) => (
                <p>{node.title}</p>
            ))}
    </div>
    )

}
export default BlogPostPreviewGrid

Что не работает:

Я не могу l oop через данные, извлеченные компонентом, при запуске l oop я получаю сообщение об ошибке консоли, заявляющее blogPostPreviewGrid.js:13 Uncaught TypeError: Cannot read property 'edges' of undefined

Что я пробовал:

Мой первый ответ был на console.log blogPosts, console.log показывает объект массива, я прикрепил массив из журнала консоли Chromes

blogPostPreviewGrid.js:13 {blogPosts: {…}}blogPosts: posts: edges: Array(2)0: node: {id: "54fe241a-c7d4-50d2-be51-4403304ddc86", publishedAt: "2020-01-05T23:00:00.000Z", mainImage: {…}, title: "Testpost2", _rawExcerpt: Array(1), …}__proto__: Object1: {node: {…}}length: 

Я также написал условное выражение, чтобы компонент только пытается отобразить данные, если что-то существует в blogPosts, и попытался настроить l oop. В итоге я выполнил git reset --hard, поэтому условного рендеринга сейчас нет.

Спасибо за все ответы!

Answer 1

Это должно работать:

BlogPostPreviewGrid.jsx

const BlogPostPreviewGrid = ({blogPosts}) => {
    return (
      <div>
         {blogPosts.posts.edges.map (({ node }) => (
            <p>{node.title}</p>
         ))}
      </div>
    )

}
export default BlogPostPreviewGrid

Answer 2

Значения, передаваемые дочерним компонентам в реакции, передаются в одном большом объекте, известном как props: https://reactjs.org/docs/components-and-props.html.

Таким образом, вам необходимо деструктурировать реквизиты в вызове функции:

const BlogPostPreviewGrid = ({blogPosts}) => {
    // do stuff
    console.log(blogPosts)
}

Или используйте объект props

const BlogPostPreviewGrid = props => {
    // do stuff using blogPosts 
    console.log(props.blogPosts);
}

Если бы ваш компонент выглядел примерно так <Foo prop1={prop1} prop2={prop2} />, то вы бы получили к нему доступ так:

const Foo = props => {
    console.log(props.prop1);
    console.log(props.prop2);
}

или вот так:

const Foo = ({ prop1, prop2 }) => {
    console.log(prop1);
    console.log(prop2);
}