React表单提交时react-loader-spinner加载器不显示问题

核心问题原因 #

• 加载器组件导入使用方式错误：import * as Loader from 'react-loader-spinner'导入的是模块命名空间对象，无法直接作为React组件渲染。
• Formik提交状态逻辑有误：当前onSubmit为同步函数，Formik执行完同步逻辑后会立刻将isSubmitting重置为false，加载器没有足够的渲染展示时间。

修复步骤 #

1. 修正加载器导入与渲染写法 #

两种写法二选一即可：

• 推荐写法（v2及以上版本支持）：单独导入需要的加载器组件
  替换原有导入语句：

  import { ThreeDots } from 'react-loader-spinner';
  

  对应渲染位置替换为直接使用ThreeDots组件：

  {isSubmitting && (
    <ThreeDots
      color={colors.theme}
      height={49}
      width={100}
      ariaLabel="loading"
    />
  )}
  

• 保留命名空间导入的写法：渲染时取模块下的对应组件属性

  {isSubmitting && (
    <Loader.ThreeDots
      color={colors.theme}
      height={49}
      width={100}
      ariaLabel="loading"
    />
  )}
  

提示：v3及以上版本的react-loader-spinner已内置样式，无需手动引入react-spinner-loader.css文件，旧版本保留原有样式引入即可。

2. 修正Formik提交逻辑 #

如果登录逻辑包含异步接口请求，需要等待异步逻辑执行完成后再重置提交状态，保证加载器正常展示：

onSubmit={async (values, { setSubmitting }) => {
  console.log(values);
  // 此处替换为实际的登录接口请求逻辑
  await new Promise(resolve => setTimeout(resolve, 1500)); // 仅为模拟请求延迟示例
  // 所有提交逻辑执行完毕后，再关闭加载状态
  setSubmitting(false);
}}

内容的提问来源于stack exchange，提问作者Darkpsinight