将18个app更新为TanStack/query中的createRoot中断突变

Question

我使用TanStack/query来处理注册/登录到Drupal 9网站的突变。

如果注册成功，我会自动登录用户。

使用React 17，下面的代码允许用户注册，然后立即登录。但是，使用React 18和createRoot，注册成功，但登录失败，因为onSuccess不再能够访问变量formData (console.log() in onSuccess返回formData的空对象)。

const onSubmit = (submitData: DrupalLoginFormInput) => {
  setIsLoading(true);
  mutateRegister.mutate(submitData);
};

export const useMutationRegister = (
  formData: DrupalLoginFormInput,
  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,
): UseMutationResult<HttpResponse, string, DrupalLoginFormInput> => {
  const mutateLogin = useMutationLogin();
  return useMutation(
    (registerData: DrupalLoginFormInput) =>
      postRegisterUser(registerData, platform),
    {
      onSuccess: () => {
        // console.log('mutateRegister succeeded', response, formData);
        // Log in with the newly registered info.
        const registeredDataToLogin = {
          mail: formData.mail,
          pass: formData.pass,
        };
        mutateLogin.mutate(registeredDataToLogin);
      },
    },
  );
};

export type DrupalLoginFormInput = {
  mail: string;
  pass: string;
};

反应18批深潜建议使用flushSync()来禁用批处理，因此我尝试了以下方法：

const onSubmit = (submitData: DrupalLoginFormInput) => {
  flushSync(() => {
    setIsLoading(true);
    mutateRegister.mutate(submitData);
  });
};

但是，登录仍然中断(formData在onSuccess中不可用)。

如果我保持我的应用程序与Reactive18，但恢复createRoot()的旧方式(render(<App />, container);)，然后登录再次工作。但是，我想使用createRoot()，因为这会释放新的React 18特性。

如何修正代码，使formData变量在onSuccess中访问之前不会被删除

Answer 1

我不正确地使用了flushSync()。每次需要更新DOM时，都需要调用flushSync()。

坏代码：

const onSubmit = (submitData: DrupalLoginFormInput) => {
  flushSync(() => {
    setIsLoading(true);
    mutateRegister.mutate(submitData);
  });
};

良好的代码，状态更新正确：

const onSubmit = (submitData: DrupalLoginFormInput) => {
  flushSync(() => {
    setIsLoading(true);
  });
  flushSync(() => {
    mutateRegister.mutate(submitData);
  });
};