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

问题描述 投票:0回答:1

我使用

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
 变量不会被删除?

reactjs react-query
1个回答
0
投票
我错误地使用了

flushSync()

。  每次想要更新 DOM 时,您都需要调用 
flushSync()

错误代码:

const onSubmit = (submitData: DrupalLoginFormInput) => { flushSync(() => { setIsLoading(true); mutateRegister.mutate(submitData); }); };
良好的代码,状态更新正确:

const onSubmit = (submitData: DrupalLoginFormInput) => { flushSync(() => { setIsLoading(true); }); flushSync(() => { mutateRegister.mutate(submitData); }); };
    
© www.soinside.com 2019 - 2024. All rights reserved.