类型“IntrinsicAttributes & IntrinsicClassAttributes<FormInstance<, Partial<ConfigProps<

Posted 2023-03-13

【中文标题】类型“IntrinsicAttributes & IntrinsicClassAttributes<FormInstance<, Partial<ConfigProps<, >> -Redux 表单上不存在属性“isLoading”

【英文标题】：Property 'isLoading' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<FormInstance<, Partial<ConfigProps<, >> -Redux form类型“IntrinsicAttributes & IntrinsicClassAttributes<FormInstance<, Partial<ConfigProps<, >> -Redux 表单上不存在属性“isLoading”

【发布时间】：2018-07-16 23:50:18

【问题描述】：

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

表单组件：

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

这里isLoading 没有作为道具传递给表单组件。请帮我找出一个好的解决方案。

谢谢:)

【问题讨论】：

你能检查一下你是否为redux-form安装了typings或@types吗？如果是，请尝试删除它们，否则尝试安装它们。我发现在某些情况下，打字会导致比解决问题更多的问题

【参考方案1】：

Redux Form 是在 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。我也为你介绍了一些小东西。

希望这会有所帮助。

【讨论】：

我按照你的建议实现了这个，但是由于类型定义，PropTypes 上没有定义像 func 这样的问题。

如果你把代码sn-p贴在这里，我可以看看

请检查：codesandbox.io/s/5045y9pj84 我在第 1 行遇到错误。 hello.tsx 文件中的 111 请将鼠标悬停在登录上（导出默认 reduxForm( form: "loginForm" )(Login)）。你会看到我得到的错误。