Gatsby 盖茨比公司–；超过最大更新深度

我正在努力将react组件添加到我的Gatsbyjs项目中。这是一个选框式的代码器，用来获取博客中最新帖子的日期和标题，并将它们显示在react组件中

但是我遇到了这样的情况：

Maximum update depth exceeded. This can happen when a component 
repeatedly calls setState inside componentWillUpdate or componentDidUpdate.
React limits the number of nested updates to prevent infinite loops.

正如我所能收集到的，您不应该将setState放在render中，但我不知道如何在我的用例中绕过它

工作演示代码如下：

下面是我尝试使用react组件的组件：

import React from 'react';
import { StaticQuery, graphql } from "gatsby";
import Malarquee from 'react-malarquee';


export default () => (
  <StaticQuery
    query={graphql`
      query {
        allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC } limit: 10) {
          totalCount
          edges {
            node {
              id
              frontmatter {
                title
                date(formatString: "YYYY.MM.DD")
              }
              fields {
                slug
              }
            }
          }
        }
      }
    `}
    render={data => (
      <div>
        <div>
            {data.allMarkdownRemark.edges.map(({ node }) => (
              <span key={node.id}>
                {node.frontmatter.date} {node.frontmatter.title}
              </span>
            ))}
        </div>
        <div>
          <Malarquee><span>We Are </span><span>Inline, so we </span><span>don't stack</span></Malarquee>
        </div>
      </div>
    )}
  />
)

从“React”导入React；
从“盖茨比”导入{StaticQuery，graphql}；
从“react Malarquee”导入Malarquee；
导出默认值（）=>(
(
{data.allmarkdownmark.edges.map（{node}）=>(
{node.frontmatter.date}{node.frontmatter.title}
))}
我们是内联的，所以不进行堆栈
)}
/>
)
马拉基图书馆是罪魁祸首。它将
this.setupContentMeasuring
作为
ref
传递，这将导致在每个
渲染中调用该方法。该方法调用另一个（
measureContent
）调用
setState
，从而在
setState
导致状态更改时再次调用
render