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

我有一个stepper表单，它使用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});
          };

第二个插页是关于：

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>

当您转到我的数据库时，我看到在一次调用中使用这部分代码保存了50个令牌：

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

---

我想因为我使用了一个钩子，所以我得到了一个响应，而这个响应给我带来了这个错误，问题是，为什么我要在一个调用中保存和接收50个令牌？

您已经在render中直接编写了下面的代码，因此，当appMutationResponse.data可用时，如果调用触发重新渲染的

submitToken

函数，然后再次调用该函数，导致无限循环

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

解决方案是使此代码生效，并在数据更改时运行它

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

---

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