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

【问题标题】：My posts are not rendered if I return them from the function如果我从函数中返回它们，我的帖子不会呈现
【发布时间】：2020-11-08 01:02:50
【问题描述】：

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

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 函数，它将返回所有博客文章。

函数组件内的代码从组件返回语句中移出
当且仅当我通过调用函数进行呈现时，才会呈现帖子。
如果我将所有代码移回组件返回语句，则帖子将呈现良好

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

【问题讨论】：

您必须将 JSX 返回到 renderBlogPosts 函数。在blogs.allContentfulBlogPost.edges 之前添加return 关键字应该可以解决您的问题。

标签： reactjs graphql gatsby

【解决方案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>
  )

【讨论】：

另一个问题，从graphql获取数据是否等于在componentdidmount获取数据？
没有。使用 GraphQL + Gatsby 获取数据发生在构建时（在运行 gatsby develop 或 gatsby build 时）。使用 componentDidMount 或 useEffect 钩子生命周期将在加载 DOM 树后进行异步调用。