web-dev-qa-db-fra.com

Ant Design form set values ​​valeurs form props

J'utilise la conception antd dans mon formulaire.

Ici, je configure la valeur du réducteur profilereducer en utilisant la méthode shouldComponentUpdate.

class ProfileForm extends Component {

 componentDidMount = () => {
  this.props.actions.getprofile()
 }

 shouldComponentUpdate = (nextProps) => {
  if (this.props.profile) {
   this.props.form.setFieldsValue({
    name: this.props.profile.name,
   });
  } else {
   this.props.form.setFieldsValue({
    firstname: 'loading',
   });
  }
 }


 render() {
  const { getFieldDecorator, getFieldValue } = this.props.form; 
     <Form layout="vertical">
        <FormItem label="First Name" >
            {getFieldDecorator('name', { rules: [{ required: true, message: 'Required!', }], })(
                <Input addonBefore={selectBefore} placeholder="First Name" />
            )}
        </FormItem>
    </Form>    
}


 function mapStateToProps(state) {
  return {
   profile: state.profilereducer.profile,
  }
 }

 function mapDispatchToProps(dispatch) {
  return {
   actions: bindActionCreators(actions, dispatch)
  }
 }

 const Profile = Form.create()(ProfileForm);

 export default connect(mapStateToProps, mapDispatchToProps)(Profile);
}

Erreur:

enter image description here

reactjsreduxstateantdreact-props
6
Selvin

Vous définissez l'état dans une boucle, d'où l'erreur. Voici une meilleure approche pour le traiter .. Je viens de laisser selectBefore comme variable (dans votre code, je n'ai pas trouvé de réglage) .. Changez-le en chaîne si vous obtenez une erreur ..

componentDidMount = () => {
   this.props.actions.getprofile()
  }

  renderBasicform(initialVal) {
    const { getFieldDecorator, getFieldValue } = this.props.form;
    return (
      <Form layout="vertical">
        <FormItem label="First Name" >
          {getFieldDecorator('name', { initialValue: initialVal,rules: [{ required: true, message: 'Required!', }], })(
            <Input addonBefore={selectBefore} placeholder="First Name" />
          )}
        </FormItem>
      </Form>
    );
  }

  render() {
    if(!this.props.profile) {
        return (
          <div>
          {this.renderBasicform("Loading")}
          </div>
        );
    }

        return (
          <div>
            {this.renderBasicform(this.props.profile.name)}
            </div>
        );
  }
4
Hemanthvrm

Comme l'indique le nom de la fonction, le shouldComponentUpdate doit renvoyer un booléen. Soit il doit retourner true si render() doit être appelé (ce qui est normalement la valeur par défaut), ou false sinon. Il est principalement conçu comme une fonction d'optimisation, où le développeur peut ignorer le nouveau rendu du composant dans certaines circonstances. Voir la documentation react pour par exemple la fonction: https://reactjs.org/docs/react-component.html#shouldcomponentupdate

Deuxièmement, je suis sûr de savoir pourquoi vous voulez même faire un remappage entre profile et form. Il est généralement considéré comme un anti-modèle pour muter ou modifier des propriétés directement à l'intérieur des classes de composants comme celle-ci. Y a-t-il une raison particulière pour laquelle vous essayez de remapper les données profile vers la propriété form? Ne serait-il pas plus simple de construire ce mappage de la fonction de rendu et de le passer à <Form> Là? Ou mieux encore, demandez au réducteur de mapper ces données comme vous voudriez les avoir dès le début, sans avoir à utiliser des propriétés avec des données similaires mais une structure différente.

0
hakeri