Получена эта ошибка: Ошибка: слишком много повторных отрисовок. React ограничивает количество рендеров, чтобы предотвратить бесконечный цикл - PullRequest
Новая
       67

Получена эта ошибка: Ошибка: слишком много повторных отрисовок. React ограничивает количество рендеров, чтобы предотвратить бесконечный цикл

0 голосов
/ 05 мая 2020

У меня есть пошаговая форма, которая вставляет данные с использованием GraphQL / Apollo и React из двух разных мест.

Вот код: 

    export function ProjectStep({classes, nextStep}) {

      const {loading, error, data} = useUserQuery();
      const organizationsArray = _.get(data, "user.organizations");
      const [projectName, setProjectName] = useState("");
      const [organization, setOrganization] = useState("");
      const [createProject, appMutationResponse] = useappInsertMutation();
      const [createToken, tokenMutationResponse] = usetokenInsertMutation();
      const submitForm = () => {
        const variables = {name: projectName, orgId: organization, description: ""};
        createProject({variables});
      };

      const submitToken = () => {
        const variables = {
          enable: true,
          lastUsed: Date.now().toString(),
          appId: appMutationResponse.data.appInsert.id,
          orgId: appMutationResponse.data.appInsert.orgId,
        };
        createToken({variables});
      };

      if (appMutationResponse.data) {
        submitToken();
      }
}

Первая вставка включена : 

const submitForm = () => {
            const variables = {name: projectName, orgId: organization, description: ""};
            createProject({variables});
          };

Вторая вставка включена: 

const submitToken = () => {
            const variables = {
              enable: true,
              lastUsed: Date.now().toString(),
              appId: appMutationResponse.data.appInsert.id,
              orgId: appMutationResponse.data.appInsert.orgId,
            };
            createToken({variables});
          };

Эти события вызываются в кнопке: 

 <Button variant="contained" color="primary" type='button' onClick={submitForm}>
    Next
 </Button>

Но когда я нажимаю на кнопку , я получил эту ошибку: 

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

Когда go в моей базе данных, я вижу, что 50 токенов сохраняются с использованием этой части кода за один вызов: 

const submitToken = () => {
                const variables = {
                  enable: true,
                  lastUsed: Date.now().toString(),
                  appId: appMutationResponse.data.appInsert.id,
                  orgId: appMutationResponse.data.appInsert.orgId,
                };
                createToken({variables});
              };

Я думаю, что поскольку я использую перехватчик, я получил ответ, и этот ответ принес мне эту ошибку, вопрос в том, почему я сохраняю и получаю за один вызов 50 токенов?

1 Ответ

1 голос
/ 05 мая 2020

Вы написали приведенный ниже код непосредственно в рендере, поэтому, когда appMutationResponse.data доступен, если вызывается функция submitToken, которая запускает повторный рендеринг, а затем функция вызывается снова, вызывая бесконечное l oop. 

if (appMutationResponse.data) {
   submitToken();
}

Решение - ввести этот код в useEffect и запустить его при изменении данных 

useEffect(() => {
   if (appMutationResponse.data) {
      submitToken();
   }
}, [appMutationResponse.data])
...