Gatsbyjs – 超过最大更新深度

Question

我正在努力将 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 放在渲染中，但我不知道如何在我的用例中规避它。

这里的工作演示代码：https://github.com/intelligence/marquee-issue

这是我尝试使用反应组件的组件：

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>
    )}
  />
)

Answer 1

Malarquee 图书馆是罪魁祸首。它将 this.setupContentMeasuring 作为 ref 传递，这将导致在每个 render 上调用该方法。该方法调用另一个调用 setState 的 (measureContent)，如果 setState 导致状态更改，则会再次调用 render。

Gatsbyjs – 超过最大更新深度

Gatsbyjs – Maximum update depth exceeded

gatsby