Redux Form类型报错：'isLoading'属性不存在，组件传参问题求助

这个问题本质是TypeScript不知道你的表单组件接受isLoading这个自定义props，同时Redux Form的默认类型定义里也没有包含这个属性。咱们分三步来解决：

1. 给表单组件定义完整的Props类型 #

首先要明确表单组件需要接收的所有props：Redux Form注入的表单相关props，加上你自定义的isLoading。

import { reduxForm, InjectedFormProps } from 'redux-form';

// 第一步：定义你的表单字段类型（根据实际表单字段调整）
type FormFieldValues = {
  username: string;
  password: string;
  // 其他表单字段...
};

// 第二步：组合Redux Form注入的props和自定义的isLoading
type MyFormProps = InjectedFormProps<FormFieldValues> & {
  isLoading: boolean;
};

// 第三步：编写表单组件，使用定义好的Props类型
const LoginForm = ({ handleSubmit, isLoading }: MyFormProps) => (
  <form onSubmit={handleSubmit}>
    {/* 你的表单输入组件 */}
    <div>
      <label>用户名</label>
      <input name="username" type="text" />
    </div>
    <div>
      <label>密码</label>
      <input name="password" type="password" />
    </div>
    {/* 使用isLoading控制按钮状态 */}
    <button type="submit" disabled={isLoading}>
      {isLoading ? '提交中...' : '登录'}
    </button>
  </form>
);

// 用reduxForm包裹时，明确指定类型参数
export default reduxForm<FormFieldValues, MyFormProps>({
  form: 'loginForm' // 表单唯一标识，必填
})(LoginForm);

2. 在容器组件中传递isLoading props #

接下来要确保容器组件把isLoading从Redux state中取出来，传递给表单组件：

import { connect } from 'react-redux';
import LoginForm from './LoginForm';

// 假设你的Redux state结构里，isLoading在auth模块下
const mapStateToProps = (state: RootState) => ({
  isLoading: state.auth.loginLoading // 根据你的实际state路径调整
});

// 把isLoading映射为表单组件的props
export default connect(mapStateToProps)(LoginForm);

这里要注意RootState是你项目中全局Redux state的类型定义，确保它和你的state结构匹配。

3. 验证类型正确性 #

做完上面两步，TypeScript就会识别到isLoading是表单组件的合法props，不会再抛出类型错误了。核心是通过InjectedFormProps<FormFieldValues> & { isLoading: boolean }这个类型组合，告诉TypeScript：我的表单组件既要接收Redux Form注入的表单props，也要接收自定义的isLoading。

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