Question

我正在努力为我的Gatsbyjs项目添加一个react组件。这是一个字幕选择器，用于获取博客中最新帖子的日期和标题并将其显示在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中，但是在我的用例中，我看不到如何规避它。

在此处工作的演示代码：https://github.com/intelligence/marquee-issue

这是我尝试使用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>
    )}
  />
)

Answer 1

应归咎于Malarquee库。它将"%s"作为this.setupContentMeasuring传递，这将导致在每个ref上调用该方法。该方法调用另一个调用render的（measureContent），如果setState导致状态改变，则会再次调用render。

Gatsbyjs –超过最大更新深度

1 个答案: