关于javascript:react-antd-联动下拉框组数据和回显问题

1. 新增

 <Form.Item
            label="会议室指引图名称"
            className="panel-li-title"
            labelCol={{span: 7,}}
            wrapperCol={{span: 17,}}
          >
            {getFieldDecorator("name", {
              initialValue: data.name,
              rules: [
                {
                  required: true,
                  message: "会议室指引图名称不为空",
                },
              ],
            })(<Input placeholder="请输出会议室指引图名称" />)}
          </Form.Item>
          <Form.Item
            label="大厦"
            className="panel-li-title"
            labelCol={{span: 6,}}
            wrapperCol={{span: 18,}}
          >
            {/* build_floor_ids 是一个数组外面蕴含着大厦 id 和楼层 id */}
            {getFieldDecorator("build_floor_ids", {
              initialValue: data.build_floor_ids,
              rules: [
                {
                  type: "array",
                  required: true,
                  message: "大厦不为空",
                },
                {validator: (rule, value, callback) => {let record = getFieldValue("build_floor_obj");
                    // console.error("-11--", value, record);
                    if (record.type === "b") {callback("未配置楼层");
                    }
                    callback();},
                },
              ],
            })(
              // 新增编辑 - 大厦下拉框列表
              <SearchInput
                disabled={type === "edit"}
                style={{width: "100%"}}
                placeholder="请抉择大厦"
                showSearch
                // 大厦展现的 id 和名称
                fieldNames={{
                  label: "cn_name",
                  value: "id",
                  children: "children",
                }}
                onChange={(value, selectedOptions) => {
                  // 把抉择完的大厦 - 楼层的楼层 id 给了 record，selectedOptions.length - 1 减一代表只传一个楼层 id
                  let record = selectedOptions[selectedOptions.length - 1];
                  // == b 代表 代表曾经选了楼层
                  if (record.type !== "b") {// console.error(record, record?.id);
                    // 申请接口的时候把楼层 id 给了 original_id  record?.id 这种是高级写法，代表着从 record 中拿到 id
                    FloorguideAction.floorGuideList({original_id: record?.id,}).then((results) => {if (!results.success) {message.error(results.err_msg || "接口谬误", 0.5);
                        return;
                      }
                      // 最初判断有图片就展现图片没有就持续展现默认 icon
                      this.props.toggleBackUrl &&
                        this.props.toggleBackUrl(results?.data?.photo_url);
                    });
                  }

                  setFieldsValue({
                    build_floor_obj: record,
                    build_floor_id: record?.id,
                  });
                }}
              />
            )}
          </Form.Item>

2. 编辑

 state = {data: {} };
  componentDidMount() {this.init();
  }

  init = () => {let { location = {} } = this.props;
    let {query = {} } = location;
    let {id} = query;
    if (id) {
      FloorguideAction.floorGuideMeetingFindById({id,}).then((results) => {if (!results.success) {message.error(results.err_msg || "接口谬误", 0.5);
          return;
        }
        let {data = {} } = results;
        if (_.isEmpty(data)) {return;}
        this.setState({
          data: {
            // id,
            ...data,
            // 这是回显的两个联动的下拉框组建的数据 大厦 id 楼层 id
            build_floor_ids: [
              data.build_id, // 接口获取的大厦 id
              data.build_floor_id, // 接口获取的楼层 id build_floor_id
            ],
          },
        });
      });
    }
  };

  render() {let { data = {} } = this.state;
    return <Add location={this.props.location} type="edit" data={data} />;
  }