Warning: You cannot set a form field before rendering a field associated with the value. ant desgin pro form 表单报错

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

1、在form组件显示出后，再用this.form.setFieldsValue
2、在this.$nextTick(）中使用this.form.setFieldsValue
3、如果要表单绑定的数据和属性不匹配也会出现这个问题，这时就要使用第三种处理方法：在使用this.form.setFieldsValue时，赋值的数据要一一匹配field，用不到的不要赋值即可，这样操作之后错误提示就不再提醒了

综合以上三点，直接的解决办法为  参考   https://blog.csdn.net/t18092838767/article/details/102857995

import React, { useState, useImperativeHandle } from 'react';
import { Form, Input, Row, Col, Modal, message, Select, InputNumber } from 'antd';
import { getcanmembercoupons, youhuiquanup, updatenewfavar } from '@/services/couponsSend';
import Constants from '@/constans';
let invoiceBox = props => {
  const [invisible, setInvisible] = useState(false);
  const [id, setId] = useState('');
  const [title, setTitle] = useState('');
  const [statusval, setStatusval] = useState(true);
  const [typeallbase, setTypeallbase] = useState([]);

  // 此处注意useImperativeHandle方法的的第一个参数是目标元素的ref引用
  useImperativeHandle(props.cRef, () => ({
    // newChangeVal 就是暴露给父组件的方法1
    newChangeVal: () => {
      // 重置表单清空
      props.form.resetFields();
      requesgetcanmembercoupons();
      setInvisible(true);
      setTitle('新增优惠券');
      // 点击将新建后为true
      setStatusval(true);
    },
    // updatenewChangeVal 就是暴露给父组件的方法2
    updatenewChangeVal: value => {
      requesgetcanmembercoupons();
      //将点击修改的值进行还原到表单中
      setInvisible(true);
      setTitle('修改优惠券');
      //   点击修改后  为false
      setStatusval(false);
      const { coupon_base_id, coupon_desc, description, memo, total, id } = value;
      props.form.setFieldsValue({ coupon_base_id, coupon_desc, description, memo, total });
      setId(id);
    },
  }));
  // 直接 发起 可配置优惠券列表请求
  const requesgetcanmembercoupons = () => {
    getcanmembercoupons().then(res => {
      if (!res || res.code !== Constants.SUCCESS)
        return message.warning(res.message || '优惠券获取失败');
      setTypeallbase(res.data);
    });
  };

  const handleCancelincov = () => {
    setInvisible(false);
  };
  const handleOkincov = () => {
    const {
      form: { validateFields },
    } = props;
    validateFields((err, values) => {
      if (!err) {
        let { hotel_group_id, hotel_id, create_user, modify_user } = JSON.parse(
          sessionStorage.getItem('currentUser'),
        );
        if (statusval) {
          // 进行新建提交请求
          youhuiquanup({
            ...values,
            create_user,
            hotel_group_id,
            hotel_id,
            modify_user,
            type: '',
          }).then(res => {
            if (!res || (res && res.code !== Constants.SUCCESS))
              return message.warning(res.message || '提交失败');
            message.success(res.message || '提交成功');
            //进行表刷新 子组件触发父组件的方法
            props.updatalistb();
            setInvisible(false);
          });
        } else {
          //   console.log(values);
          // 修改的提交请求
          updatenewfavar({
            ...values,
            create_user,
            hotel_group_id,
            hotel_id,
            modify_user,
            type: '',
            id,
          }).then(res => {
            if (!res || (res && res.code !== Constants.SUCCESS))
              return message.warning(res.message || '修改失败');
            message.success(res.message || '修改成功');
            //进行表刷新 子组件触发父组件的方法
            props.updatalistb();
            setInvisible(false);
          });
        }
      }
    });
  };
  const { getFieldDecorator } = props.form;
  const [formItemLayout] = useState({
    labelCol: {
      xs: { span: 12 },
      sm: { span: 6 },
    },
    wrapperCol: {
      xs: { span: 12 },
      sm: { span: 16 },
    },
  });
  return (
    <Modal
      width={1000}
      title={title}
      visible={invisible}
      okText="提交"
      onOk={handleOkincov}
      onCancel={handleCancelincov}
    >
      <Form {...formItemLayout}>
        <Row type="flex" gutter={16}>
          <Col span={12}>
            <Form.Item label="优惠券">
              {getFieldDecorator('coupon_base_id', {
                initialValue: typeallbase[0] && typeallbase[0].id,
                rules: [
                  {
                    required: true,
                    message: '请输入优惠券',
                  },
                ],
              })(
                <Select>
                  {typeallbase &&
                    typeallbase.map(item => {
                      return (
                        <Option value={item.id} key={item.id}>
                          {item.title}
                        </Option>
                      );
                    })}
                </Select>,
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="活动类型描述">
              {getFieldDecorator('description', {
                rules: [
                  {
                    required: true,
                    message: '请输入活动类型描述',
                  },
                ],
              })(<Input />)}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="优惠券描述">
              {getFieldDecorator('coupon_desc', {
                rules: [
                  {
                    required: true,
                    message: '请输入优惠券描述',
                  },
                ],
              })(<Input />)}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="赠送数量">
              {getFieldDecorator('total', {
                initialValue: 1,
                rules: [
                  {
                    required: true,
                    message: '请输入赠送数量',
                  },
                ],
              })(<InputNumber style={{  '100%' }} min={1} max={10} />)}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="备注">{getFieldDecorator('memo')(<Input />)}</Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};

export default Form.create({ name: 'mostfavaraform' })(invoiceBox);