Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ant Design form set values form props

I'm using antd design in my form.

Here I'm setting value from reducer profilereducer by using shouldComponentUpdate method.

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

Error:

enter image description here

like image 823
Selvin Avatar asked Dec 10 '18 14:12

Selvin


People also ask

What is valuePropName?

valuePropName is the name of the prop of the child component that will contain the value. In most cases, components such as Input or Select use value as the prop for holding the value. However, certain components such as Checkbox or Switch use checked .

What is wrapperCol?

wrapperCol: It is used to denote the layout for input controls. onFieldsChange: It is a callback function that is triggered when the field updated. onFinish: It is a callback function that is triggered after submitting the form and verifying data successfully.

What is getFieldDecorator?

getFieldDecorators is a Two-way binding for form . There is no getFieldDecorators in React, this is an ant-design API.


1 Answers

You are setting state in a loop, hence you got the error. Here is a better approach of dealing it.. I just left selectBefore as a variable(in your code, i haven't found setting it).. Change it to string if you get error..

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>
        );
  }
like image 171
Hemanthvrm Avatar answered Sep 27 '22 21:09

Hemanthvrm