Gatsbyjs - превышена максимальная глубина обновления

Question

Я пытаюсь добавить компонент реагирования в мой проект Gatsbyjs. Это бегущая строка, которая должна собирать дату и заголовок последних сообщений в блоге и отображать их в компоненте реакции.

Однако я сталкиваюсь с этим:

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

Виновата библиотека Маларки. Он передает this.setupContentMeasuring как ref, что приводит к тому, что этот метод вызывается для каждого render. Этот метод вызывает другой (measureContent), который вызывает setState, в результате чего render вызывается снова, если setState приводит к изменению состояния.