patientListContainerNew.js
...
render: (text, rowData) => (
<IconButton color="primary" aria-label="delete" size="small">
<PatientEditContainer rowData={ rowData } />
<Popconfirm Popconfirm
title="Are you sure？" okText="Yes" cancelText="No"
onConfirm={() => {handleDelete(rowData, "yes")}}>
<DeleteForever fontSize="small" style={{ color: "#00ffff" }} />
</Popconfirm>
</IconButton>
...
patientEditContainer.js
...
const PatientEditContainer = ({ rowData }) => {
const [editVisible, setEditVisible] = useState(false);
const handleEdit = ({}) => {
const { editPatient } = this.props;
editPatient({ pid: rowData.pid,
name: rowData.name,
gender: rowData.gender,
age: rowData.age,
birth_date: rowData.birth_date });
};
return(
<div>
<EditIcon onClick={() => setEditVisible(true)} />
<PatientInfoEdit
visible={ editVisible }
setVisible={ setEditVisible }
onCancel={() => setEditVisible(false)}
onEditPatient={ handleEdit }
pid = {rowData.pid}
name = {rowData.name}
gender = {rowData.gender}
age = {rowData.age}
birth_date = {rowData.birth_date}
key = {rowData.key}
/>
</div>
);
}
const mapStateToProps = state => ({
});
const mapDispatchToProps = dispatch => {
return {
editPatient: ({ pid, name, gender, age, birth_date, key }) => {
dispatch(patientActions.editPatient({ pid, name, gender, age, birth_date, key }));
}
};
};
export default withRouter(
connect(
)(PatientEditContainer)
);
patientInfoEdit.js
const { Option } = Select;
const PatientInfoEdit = ({ visible, onCancel, onEditPatient, setVisible, pid, name, gender, age, birth_date, key }) =>{
const [ data, setData ] = useState("reset");
const [ birthDate, setBirthDate ] = useState(Moment());
const layout = {
labelCol: { span: 8 },
wrapperCol: { span: 13 },
};
const dateFormat = 'YYYY-MM-DD';
const validateMessages = {
required: 'This field is required!',
types: {
email: 'Not a validate email!',
number: 'Not a validate number!',
},
number: {
range: 'Must be between ${min} and ${max}',
},
};
const dateConfig = {
rules: [{ type: 'object', required: true, message: 'Please select birthdate!'}],
};
const onAgeChange = value => {
const birth = Moment().subtract(value, 'years').format('YYYY-MM-DD');
setBirthDate(birth);
console.log('onAgeChange : ' + birthDate);
}
const onFinish = values => {
console.log('values ::::: ' + values);
}
const onOk = values => {
const { patient } = values;
const { pid, name, gender, age, birth, fundus, key } = patient;
const birth_date = Moment(birth).format(dateFormat);
onEditPatient({ pid, name, gender, age, birth_date, key });
}
const [ form ] = Form.useForm();
return (
<Modal
title="Edit Patient"
centered
visible={visible}
onCancel={onCancel}
okText='Submit'
okButtonProps={{ type:'ghost', style:{ color:'aqua',
borderColor:'aqua', borderRadius:'4px' }}}
cancelButtonProps={{ type:'ghost', style:{ color: '#a9a9a9',
borderColor:'#a9a9a9', borderRadius:'4px' }}}
onOk={() => {
form
.validateFields()
.then(values => {
form.resetFields();
onOk(values);
})
}}
width={400}
>
<Form {...layout}
name='patientInfo'
validateMessages={ validateMessages }
onFinish={ onFinish }
autoComplete='off'
form={form}
>
<Form.Item name={['patient', 'pid']} label="Patient ID" rules={[{ required: true }]}>
<Input placeholder={ pid }/>
</Form.Item>
<Form.Item name={['patient', 'name']} label="Name" rules={[{ required: true }]}>
<Input value={ birthDate } placeholder = { name }/>
</Form.Item>
<Form.Item name={['patient', 'gender']} label="Gender">
<Select
placeholder= { gender }
allowClear
>
<Option value="male">male</Option>
<Option value="female">female</Option>
<Option value="other">other</Option>
</Select>
</Form.Item>
<Form.Item name={['patient', 'age']}
label="Age" rules={[{ type: 'number', min: 0, max: 99 }]}>
<InputNumber onChange={ onAgeChange } placeholder = { age }/>
</Form.Item>
<Form.Item name={['patient', 'birth']} label="Birth Date" {...dateConfig} >
<DatePicker format={ dateFormat } placeholder = { birth_date }/>
</Form.Item>
</Form>
</Modal>
);
}
const mapStateToProps = state => ({
});
const mapDispatchToProps = dispatch => {
return {
editPatient: ({ pid, name, gender, age, birth_date, key }) => {
dispatch(patientActions.editPatient({ pid, name, gender, age, birth_date, key }));
}
};
};
export default withRouter(
connect(
mapStateToProps,
mapDispatchToProps
)(PatientInfoEdit)
);
error
Unhandled Rejection (TypeError): Cannot read property 'props' of undefined
handleEdit
D:/test/src/containers/patient/PatientEditContainer.js:23
20 | const [editVisible, setEditVisible] = useState(false);
21 |
22 | const handleEdit = ({}) => {
> 23 | const { editPatient } = this.props;
| ^ 24 | editPatient({ pid: rowData.pid, name: rowData.name, gender: rowData.gender, age: rowData.age, birth_date: rowData.birth_date });
25 | };
26 |
View compiled
onOk
D:/tese/src/pages/patient/PatientInfoEdit.js:69
66 | const { patient } = values;
67 | const { pid, name, gender, age, birth, fundus, key } = patient;
68 | const birth_date = Moment(birth).format(dateFormat);
> 69 | onEditPatient({ pid, name, gender, age, birth_date, key });
| ^ 70 | }
71 |
72 | // const onGenderChange = value => {
View compiled
(anonymous function)
D:/test/src/pages/patient/PatientInfoEdit.js:94
91 | .validateFields()
92 | .then(values => {
93 | form.resetFields();
> 94 | onOk(values);
| ^ 95 | })
96 | }}
97 | width={400}
After the patientInfoEdit.js form appears, enter the information and click OK, an error occurs. I thought this code was perfect, but I got an error. I don't know why. I will post other parts of the code as well if you wish. Please tell me why the error occurred. I want to fix the props error.
The issue is in patientEditContainer.js file
const handleEdit = ({}) => {
const { editPatient } = this.props; <- Here you are trying to fetch using `this`
editPatient({ pid: rowData.pid,
name: rowData.name,
gender: rowData.gender,
age: rowData.age,
birth_date: rowData.birth_date });
};
what you can do if you are passing props right:
const { editPatient } = props;
or
const PatientEditContainer = ({ rowData,editPatient }) => {...}
Note: Make sure you are passing correct props!