Question

和以前一样，我正在与reduxForm一起工作，然后我了解了reactFinalForm。所以现在我正在尝试将其代码从reduxForm迁移到带有其官方文档参考的reactFinalForm。但是我的控制台出现错误，不知道它是否是主要问题

错误：Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it. -> in renderForm (created by ReactFinalForm)

在此代码段中可能出现错误

const LoginForm= (props) =>{
  return <Form
    onSubmit={props.onSubmit}
    validate= { v => {
    const e = {};
     if(!v.email) {e.email= "Required";}
     else if(invalidEmail(v.email)) e.email= "Invalid email";
     if (!v.password){ e.password = "Required";}
     return e;
    }}
    component={renderForm} 
    />;
}

我认为这是引发错误component={renderForm}

我的codeBlock我正在尝试的地方：

const renderForm=()=>({loading})=>{
  const d=loading? 'disabled': '';
  return (
   <Form
    render= {({error,onSubmit,handleSubmit})=>(
     <form onSubmit={handleSubmit(onSubmit)}>
      <fieldset>
       <legend>Credentials</legend>
       <UserInformation/>
       <ClickWrap/>
       <button disabled={d}>{d? 'Loading...': 'AGREE & LOGIN'}</button>
       {error&& <p className="error">{error}</p>}
      </fieldset>
     </form>
    )}
   />
 );
 }

const LoginForm= (props) =>{
  return <Form
    onSubmit={props.onSubmit}
    validate= { v => {
    const e = {};
     if(!v.email) {e.email= "Required";}
     else if(invalidEmail(v.email)) e.email= "Invalid email";
     if (!v.password){ e.password = "Required";}
     return e;
    }}
    component={renderForm}
    />;
} 

class Login extends PureComponent {
 constructor(props){super(props); this.state = {};}
 componentDidMount(){buttonCheck(this.props);}
 componentDidUpdate(){buttonCheck(this.props);}

 handleSubmit= v/*values*/ => {
  this.props.loginPromiseCreator(v);
  agree(this.props);
 }

 render=()=>(
  <Fragment>
   <NavigationLink />
   <MarketingPitch text="Welcome back! Please login."/>
   <LoginForm onSubmit={this.handleSubmit} loading={this.props.loading}/>
  </Fragment>
 );
}

const mapStateToProps = s/*state*/=>{ const l=s.login;
 return {isLoggedIn: l.loggedIn, loading: l.loading,
  isAgreed:l.termsAgree,user: l.user};
}

const mapDispatchToProps = dispatch => ({...bindPromiseCreators({
 loginPromiseCreator},dispatch)});

export default withRouter(connect(mapStateToProps,
 mapDispatchToProps)(Login));

先征求意见和感谢

Answer 1

问题是renderForm函数，您的组件应该是一个返回React元素的函数，而不是其他函数。

您可以使用render道具来传递其他道具：

const renderForm = ({ error, onSubmit, handleSubmit, loading }) => {
  const d = loading ? "disabled" : "";

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <fieldset>
        <legend>Credentials</legend>
        <UserInformation />
        <ClickWrap />
        <button disabled={d}>{d ? "Loading..." : "AGREE & LOGIN"}</button>
        {error && <p className="error">{error}</p>}
      </fieldset>
    </form>
  );
};

const LoginForm = props => {
  return (
    <Form
      onSubmit={props.onSubmit}
      validate={v => {
        const e = {};
        if (!v.email) {
          e.email = "Required";
        } else if (invalidEmail(v.email)) e.email = "Invalid email";
        if (!v.password) {
          e.password = "Required";
        }
        return e;
      }}
      render={(formProps) => renderForm({...formProps, loading: props.loading})}
    />
  );
};

我正在尝试从redux-Form迁移到react-Final-Form

1 个答案: