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
