Компонент бесконечный Перерисовывает, когда передается новый Date (). ToISOString () в - PullRequest
Новая
       14

Компонент бесконечный Перерисовывает, когда передается новый Date (). ToISOString () в

0 голосов
/ 15 февраля 2019

РЕДАКТИРОВАТЬ:

Если я заменим переменную на жестко закодированную строку, например, так: 

<Query
          query={CLASSES_QUERY}
          variables={{ startsAt_gte: "2019-01-11T11:11:11.111Z" }}
        >

все работает просто отлично.

Компонент, который содержит <Query />, продолжает повторную визуализацию, когда variables предоставлено new Date().toISOString() для поля StartSt_gte Prisma.

Сначала этого не произошло вообще.Затем несколько дней назад просто перестал работать (начал бесконечный повторный рендеринг).

Перемещение new Date().toISOString() из компонента <Query variables={..} /> в constructor() в компоненте класса React, решенном для одного компонента.

Однако, проблема все еще сохраняется здесь: (возможно, и в других местах) 

import React from 'react';

import gql from 'graphql-tag';
import { Query } from 'react-apollo';

import Loading from 'loading';
import Error from 'error';

const CLASSES_QUERY = gql`
  query CLASSES_QUERY($startsAt_gte: DateTime) {
    classes(where: { active: true }) {
      id 
      }
      sessions(where: { startsAt_gte: $startsAt_gte }) {
        id
        startsAt
      }
    }
  }
`;
class ClassList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      startsAt_gte: new Date().toISOString()
    };
  }

  render() {
    const { startsAt_gte } = this.state;

    return (
      <>
        <Query
          query={CLASSES_QUERY}
          variables={{ startsAt_gte: startsAt_gte }}
        >
          {({ data, loading, error }) => {
            if (loading) return <Loading />;
            if (error) return <Error />;

            return (
              <div>
                <div>
                  {data.classes.map(cls => {
                    return (
                      <div>
                        <h2>{cls.title}</h2>
                        {cls.sessions.map(ses => {
                          return <div>{ses.startsAt}</div>;
                        })}
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          }}
        </Query>
      </>
    );
  }
}

export default ClassList;

Я что-то не так делаю в коде выше?

...