problem description

the company project has an interface to do a purchase function, but now it uses modal,
but encountered a problem when taking the value. The form data was fetched by the componentDidMount of a big component before,
but now I don"t know how to get the specified data of the purchase list. I want to include the id and the data of this form, but the method is written in onclick and dispatch reports an error. I hope God can help me make suggestions. The
code is as follows:

the environmental background of the problems and what methods you have tried

use

showModal = () => {
  // showModal = () => {
    // 
    this.setState({ visible: true });
    const { dispatch, id } = this.props;
    // const { dispatch, match: { params: { id } } } = this.props;
    // dispatch({
    //   type: "service/changeShow",
    // })
    dispatch ({
      type: "service/getStorageListId",
      id,
    })
    // const { dispatch, id } = this.props;
    
  }

related codes

// 

@Form.create()
class CollectionCreateForm extends Component {
  
  render() {
    const { visible, onCancel, onCreate, form, data } = this.props;
    const { getFieldDecorator } = form;
    // console.log(this.props)
    console.log(data)
    return (
      <Modal
        visible={visible}
        title=""
        okText=""
        onCancel={onCancel}
        onOk={onCreate}
      >
        <Form layout="vertical">
          <FormItem label="">
            {getFieldDecorator("name",{
            initialValue: data.name,
            }
            )(<Input type="disabled" />
            )}
          </FormItem>
          <FormItem label="">
            {getFieldDecorator("id",{
            initialValue: "",
            }
            )(<Input type="textarea" />
            )}
          </FormItem>
          <FormItem label="">
            {getFieldDecorator("max_space",{
                initialValue: data.max_space,
            }
            )(<Input type="textarea" />
            )}
          </FormItem>
          <FormItem label="">
            {getFieldDecorator("max_servant_count",{
            initialValue: data.max_servant_count,
            }
            )(<Input type="textarea" />
            )}
          </FormItem>
          <FormItem label="">
            {getFieldDecorator("expire",{
                initialValue: data.expire,
            }
            )(<Input type="textarea" />
            )}
          </FormItem>
          <FormItem label="">
            {getFieldDecorator("price",{
                initialValue: data.price,
            }
            )(<Input type="textarea" />
            )}
          </FormItem>
        </Form>
      </Modal>
    );
  }
}

export default connect(({ service }) => ({
    data: service.storageData.list,
  }))(CollectionCreateForm);

//
@connect(({ service, loading }) => ({
  service,
  submitting: loading.effects["form/submitRegularForm"],
}))
class CollectionsPage extends Component {
  state = {
    visible: false,
  };
  showModal = () => {
  // showModal = () => {
    // 
    this.setState({ visible: true });
    const { dispatch, id } = this.props;
    // const { dispatch, match: { params: { id } } } = this.props;
    // dispatch({
    //   type: "service/changeShow",
    // })
    dispatch ({
      type: "service/getStorageListId",
      id,
    })
    // const { dispatch, id } = this.props;
    
  }

  handleCancel = () => {
    this.setState({ visible: false });
  }

  handleCreate = () => {
    
  }

  saveFormRef = (formRef) => {
    this.formRef = formRef;
  }
  
  render() {
    let formProps = {...this.props };
    //  
    // console.log(this.props);
    return (
      <div>
        <Button onClick={this.showModal}></Button>
        <CollectionCreateForm
          {...formProps}
          wrappedComponentRef={this.saveFormRef}
          visible={this.state.visible}
          onCancel={this.handleCancel}
          onCreate={this.handleCreate}
        />
      </div>
    );
  }
}
export default CollectionsPage; 
//effects
// 
    *getStorageListId({ id }, { call, put }) {
      const response = yield call(listStorage, id);
      if (response.status === true) {
        yield put({
          type: "queryGetStorage",
          payload: response.data,
        });
      }
    },
    //reducer
    queryGetStorage(state, { payload }) {
      return {
        ...state,
        storageData: payload,
        needRefresh: false,
      };
    },

the value is taken to the this.props, but I don"t know how to get the value of the specified Id