Проверки формы Ant-d в форме реакции, где создание и редактирование выполняются в одной форме

Question

Я использую проверки формы Ant-d для формы реакции, в которой как создание, так и редактирование выполняются в одной и той же форме, что вызывает у меня путаницу в том, как управлять состоянием в реакции. Нужно ли мне применять getFieldDecorator для всех полей и управлять их укажите в форме и как установить значения в this.props.form. Пожалуйста, помогите мне в этом. Если что-то не так с вопросом, пожалуйста, помогите мне улучшить его.

 class OffersForm extends Component {
   constructor(props) {
   super(props);
    this.state = {
      offer: this.props.offer,
    };
    this.handleSave= this.handleSave.bind(this);
    this.handleOnChange = this.handleOnChange.bind(this);
  }

  componentWillMount(){
    if(!this.state.isNew){
    const offer = this.props.offer
    }
  }

 componentDidMount() {
   this.getOffers();
  }

  getOffers=() =>{
    if (this.props.offer) {
     this.setState({
       offer: this.props.offer
        }, () => {
       this.props.form.setFieldsValue(Object.assign({}, 
                                    this.props.offer));
         },()=>console.log("Props Values"+ getFieldsValue));
       }
      };

  handleOnChange(element, value) {
   const offer = Object.assign({}, this.state.offer, { [element]: 
                   value })

    this.props.form.setFieldsValue({
      offer
    }); 
    this.setState({ offer }) 
  }

  handleSave() {
    this.props.form.validateFields((err, values) => {
    if (!err) {
      this.setState({ inProgress: true })
        } 
  } 

  render() {
    const { getFieldDecorator } = this.props.form;          
     return (
       <div>
         <Form>
           <Row gutter={16}>
             <Col xs={24} sm={24}>
               <Form.Item label={I18n.t('general.name')}>
                 { getFieldDecorator(
                    'name', {
                      initialValue:offer.name,
                      rules: [{required:true, message:'Please Enter 
                                Name'}],
                       })
                        ( <Input
                            value={offer.name}
                            onChange={e => 
                                      this.handleOnChange('name', 
                                       e.target.value)}
                            />)}
                  </Form.Item>
              </Col>
            </Row>
            <div>
              <Row>
                <Col xs={12} sm={12}>
                  <Form.Item label={I18n.t('general.phone_number')}>
                    { getFieldDecorator('action_to', {
                       initialValue:offer.action_to,
                       rules: [{required:true, message: 'Please 
                                          Enter Phone Number'}],
                     })
                    (<Input
                        onChange={e => 
                        this.handleOnChange('action_to', 
                             e.target.value)}
                    />)}
                 </Form.Item>
                </Col>
              </Row>
            </div>
        <Row>
          {FormErrors(this.state.errors)}
        </Row>
         <Row>
           <Col span={24}>
              {FormButtons(this.state.inProgress, this.handleSave, 
                    this.props.onCancel)}
           </Col>
         </Row>
        </Form>
       </div>
       );
      }
      }
      export default Form.create()(OffersForm);

Ошибка

        Warning: You cannot set a form field before rendering a 
        field associated with the value.

Answer 1

Предупреждение, которое вы удалили из своего вопроса:

Предупреждение: getFieldDecorator переопределит value, поэтому, пожалуйста, не устанавливайте value напрямую и используйте setFieldsValue для его установки.

относится к следующей части кода:

           <Form.Item...
             { getFieldDecorator(
                    ( <Input
                        value={offer.name}
                        ...

и может быть исправлено путем удаления части value={offer.name}.

Answer 2

Нет необходимости в функции onChange для установки значений в this.props.form. Это является причиной предупреждения

Предупреждение: Вы не можете установить поле формы перед отображением поля, связанного со значением.

   <Row>
    <Col>
     <Form.Item label={I18n.t('general.email')}>
              { getFieldDecorator('action_to', {
                 rules: [
                   {type: 'email', message: 'The input is not valid E-mail!'},
                   {required:true, message: 'Please Enter Email'}],
                })
                (<Input/>)
              }
      </Form.Item>
     </Col>
    </Row>
    <Row>
     <Col>
      <Form.Item label={I18n.t('general.name')}>
          { getFieldDecorator('name', {
            rules: [{required:false, message:'Please Enter Name'}],
            })
            (<Input />)
          }
       </Form.Item>
     </Col>
   </Row>

мы можем получить значения this.props.form, используя getFieldsValue () const formData = this.props.form.getFieldsValue ();