将 React 18 应用程序更新为 createRoot 会破坏 TanStack/query 中的突变

Question

我使用

TanStack/query

来处理注册/登录 Drupal 9 网站的突变。

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

在 React 17 中，以下代码允许用户注册，然后立即登录。但是，在 React 18 和 createRoot 中，注册成功但登录失败，因为

onSuccess

不再有权访问变量

formData

（

console.log()

中的

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;
};

React 18 批处理深入研究建议使用flushSync()

禁用批处理，所以我尝试了这个：

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

但是，登录仍然失败（

formData

在

onSuccess

中不可用）。

如果我将我的应用程序保留为 React 18，但将

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);
  });
};