收到此错误：错误：重新渲染过多。 React 限制渲染次数以防止无限循环

Posted 2023-03-08

【中文标题】收到此错误：错误：重新渲染过多。 React 限制渲染次数以防止无限循环

【英文标题】：Recieved this error: Error: Too many re-renders. React limits the number of renders to prevent an infinite loop

【发布时间】：2020-08-20 11:56:58

【问题描述】：

我有一个步进表单，它使用 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.

访问我的数据库时，我看到在一次调用中使用这部分代码保存了 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】：

您已经在渲染中直接编写了以下代码，因此当 appMutationResponse.data 可用时，如果调用触发重新渲染的 submitToken 函数，然后再次调用该函数导致无限循环。

if (appMutationResponse.data) 
   submitToken();

解决办法是把这段代码放到useEffect中，在数据变化时运行

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

【讨论】：

感谢您的回复，它解决了我的问题。这很有启发性。