reactjs - 如果我从函数中返回它们，我的帖子不会呈现

Question

我useStaticQuery 在函数组件的开头像这样从 graph-ql 获取数据

const blogs = useStaticQuery(graphql`
    query {
      allContentfulBlogPost(sort: { fields: publishedDate, order: DESC }) {
        edges {
          node {
            title
            publishedDate
            slug
            tag
          }
        }
      }
    }
  `)

现在我正在尝试渲染从 graphql 获得的帖子

const renderBlogPosts = () => {
    {blogs.allContentfulBlogPost.edges.map((oneEdge, i) => {
      const tags = oneEdge.node.tag.split(" ")
      return (
        <div className="blog__post" key={`blog${i}`}>
          <Link to={oneEdge.node.slug}>
            <h4 className={`title${i}`}>{oneEdge.node.title}</h4>
            <p className="blog__date">{oneEdge.node.publishedDate}</p>
            <div style={{ display: "flex" }}>
              {tags.map((oneTag, i) => {
                return <p className="blog__tag" key={`tag${i}`}>{oneTag}</p>
              })}
            </div>
          </Link>
        </div>
      )
    })}
  }

  return (
    <Layout>
      <form onSubmit={handleSumbit}>
        <input type="text" onChange={handleChange} />
        <button>Search</button>
      </form>

      <div className="blog__container">
          {renderBlogPosts()}
      </div>
    </Layout>
  )

如您所见，我得到了renderBlogPost将返回所有博客文章的函数。

1. 函数组件内部的代码从组件返回语句中移出
2. 当且仅当我通过调用函数进行渲染时，才不会渲染帖子。
3. 如果我将所有代码移回组件返回语句，则帖子会很好

这个问题与graph-ql有关吗？虽然帖子没有显示我没有收到错误日志

标签： reactjsgraphqlgatsby

Answer 1

这不是 GraphQL 问题，当然，这是因为您的代码。在您的renderBlogPosts功能中，您没有返回任何内容。只需将其更改为：

const renderBlogPosts = () => {
    return blogs.allContentfulBlogPost.edges.map((oneEdge, i) => {
      const tags = oneEdge.node.tag.split(" ")
      return (
        <div className="blog__post" key={`blog${i}`}>
          <Link to={oneEdge.node.slug}>
            <h4 className={`title${i}`}>{oneEdge.node.title}</h4>
            <p className="blog__date">{oneEdge.node.publishedDate}</p>
            <div style={{ display: "flex" }}>
              {tags.map((oneTag, i) => {
                return <p className="blog__tag" key={`tag${i}`}>{oneTag}</p>
              })}
            </div>
          </Link>
        </div>
      )
    })
  }

  return (
    <Layout>
      <form onSubmit={handleSumbit}>
        <input type="text" onChange={handleChange} />
        <button>Search</button>
      </form>

      <div className="blog__container">
          {renderBlogPosts()}
      </div>
    </Layout>
  )