属性“isLoading”在类型“IntrinsicAttributes & IntrinsicClassAttributes>”上不存在 -Redux 表单

我有一个容器组件和一个表单组件：

表单组件：

import * as React from 'react';
import { reduxForm, Field, InjectedFormProps } from 'redux-form';

export type LoginState = {
  email: string;
  password: string;
};

interface LoginProps extends InjectedFormProps {
  isLoading: boolean;
  onSubmit(userCredential: LoginState): void;
}

class Login extends React.Component<LoginProps, LoginState> {
  constructor(props: LoginProps) {
    super(props);
    this.state = {
      email: '',
      password: '',
      otp: '',
    };
  }
  onEmailChange = (e: React.FormEvent<HTMLInputElement>) => {
    this.setState({ email: e.currentTarget.value.trim() });
  };

  onPasswordChange = (e: React.FormEvent<HTMLInputElement>) => {
    this.setState({ password: e.currentTarget.value.trim() });
  };

  onSubmit = () => {
    this.props.onSubmit(this.state);
  };

  render() {
    return (
      <div>
        <h3 className="ac-section__title">Login</h3>
        <div className="ac-section__body">
          <form onSubmit={this.props.handleSubmit(this.onSubmit)}>
            <Field
              name="email"
              placeholder="Email"
              component={renderInput}
              type="email"
              value={this.state.email}
              onChange={this.onEmailChange}
              validate={[required, email]}
            />
            <Field
              name="password"
              placeholder="Password"
              component={renderInput}
              type="password"
              value={this.state.password}
              onChange={this.onPasswordChange}
              validate={required}
            />
            <br />
            <div className="loginBtnContainer">
              <button className="btn primaryButton" type="submit">
                Login
              </button>
            </div>
          </form>
          <div className="ac-password__wrapper">
            <Link to="/forgot-password" className="ac-password-link">
              Forgot your password?
            </Link>
          </div>
        </div>
      </div>
    );
  }
}

export default reduxForm({ form: 'loginForm' })(Login);

容器组件：

return (
      <div>
         <Login onSubmit={this.onSubmit} isLoading={true} />  
         /* here throwing error: Property 'isLoading' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<FormInstance<{}, Partial<ConfigProps<{}, {}>>>> & ...'. */

      </div>
    );

here isLoading没有作为 props 传递到表单组件。请帮我提供一个好的解决方案。

谢谢 ：）

回归形式 https://redux-form.com是 React + Redux 环境中表单处理和验证的一种非常有效的方法。您遇到的问题似乎与缺少道具和一些接口定义有关。我在最后提供了一个沙箱。

解决方案可能是自己指定表单接口，如下所示：

export interface FormInterface {
  handleSubmit: PropTypes.func; 
  handleChange?: PropTypes.func;
  reset?: PropTypes.func;
  pristine?: PropTypes.bool;
  submitting?: PropTypes.bool;
  error?: PropTypes.bool;
  invalid?: PropTypes.bool;
  submitSucceeded?: PropTypes.bool;
  submitFailed?: PropTypes.bool;
  anyTouched?: PropTypes.bool;
}

并用它来推导LoginProps从。那么 typescript 就不会抱怨缺少 props，这显然是 redux 表单的工作方式。

看到这个sandbox https://codesandbox.io/embed/x3kq4p22ow了解详情。我也为您讨论了一些小问题。

希望这可以帮助。