I have a React formt that I am attempting to use to update a record. My back-end team had supplied me with an API that I have see work to create a record using Postman, but when I try to use and Axios PUT, I first get the error:
PUT http:// … /updateRecord/undefined
react_devtools_backend.js:2655 Unhandled Promise rejection: Request failed with status code 400 ; Zone: ; Task: Promise.then ; Value: AxiosError {message: ‘Request failed with status code 400’, name: ‘AxiosError’, code: ‘ERR_BAD_REQUEST’, config: {…}, request: XMLHttpRequest, …} undefined
then this 409 error:
PUT http:// … /updateRecord/(item id)
react_devtools_backend.js:2655 Unhandled Promise rejection: Request failed with status code 409 ; Zone: ; Task: Promise.then ; Value: AxiosError {message: ‘Request failed with status code 409’, name: ‘AxiosError’, code: ‘ERR_BAD_REQUEST’, config: {…}, request: XMLHttpRequest, …} undefined
I don’t know why the update isn’t working. I am also having a similar issue creating a record with a POST request, but I do not get any console errors and the record does not get create. I assume whatever I have wrong on this form is happening on that form as well. My form validation it working just fine, but I included it here for reference.
Right now I have a very basic Axios PUT written, but eventually want to add error handling and the ability to display a confirmation message.
DepartmentEdit.tsx
export function DepartmentEdit(props) {
const { closeModal, refreshTable, selectedRecord, ltUpdateUrl } = props;
const validate = (fieldValues = values) => { // these will need to be customized to required fields per table
const temp = { ...errors };
if ('name' in fieldValues)
{ temp.name = fieldValues.name ? '' : 'Department Name is required.'; }
if ('description' in fieldValues)
{ temp.description = fieldValues.description ? '' : 'Description is required.'; }
setErrors({
...temp
});
if (fieldValues === values)
{ return Object.values(temp).every(x => x === ''); }
};
const {
errors,
setErrors,
handleInputChange,
values,
setValues,
} = FormFunctions(initialValues, true, validate);
React.useEffect(() => {
if (selectedRecord !== null)
{setValues({
...selectedRecord
}); }
}, [selectedRecord, setValues]);
const curValue = values.isArchived === 1 ? false : true;
// PUT Request
async function editRecord(values: any) {
await axios.put(`${ltUpdateUrl + (values.id)}`, {
title: 'Success',
body: 'The record had been successfully updated'
});
refreshTable();
}
const handleSubmit = e => {
e.preventDefault();
if (validate()){
editRecord(selectedRecord);
closeModal();
}
};
return (
<Form onSubmit={handleSubmit} >
<Grid container spacing={0}>
<Grid item md={8}>
<Controls.Input
type='text'
onChange={handleInputChange}
label='Department Name'
name='name'
value={values.name !== null ? values.name : ''}
error={errors.name}
/>
</Grid>
<Grid item md={4}>
<Controls.ToggleSwitch
label1='Inactive'
label2='Active'
curValue={curValue}
value={values.isArchived}
/>
</Grid>
<Grid item md={12}>
<Controls.Input
type='text'
onChange={handleInputChange}
label='Description'
name='description'
value={values.description !== null ? values.description : ''}
error={errors.description}
/>
</Grid>
</Grid>
<Grid>
<Controls.Button
type='submit'
text='Submit'
onClick={editRecord}
/>
<Controls.Button
text='Cancel'
color='default'
onClick={closeModal}
/>
</Grid>
</Form>
);
}
FormFunctions.tsx
export function FormFunctions(initialValues, validateOnChange = false, validate) {
const [values, setValues] = React.useState({} as any);
const [errors, setErrors] = React.useState({} as any);
const handleInputChange = e => {
const { name, value } = e.target;
setValues({
...values,
[name]: value
});
if (validateOnChange)
{ validate({ [name]: value }); }
};
const resetForm = () => {
setValues(initialValues);
setErrors({});
};
return {errors, handleInputChange, resetForm, setErrors, setValues, values};
}
export function Form(props) {
const classes = useFormStyles();
const { children, ...other } = props;
return (
<form className={classes.root} autoComplete='off' {...other}>
{props.children}
</form>
);
}
Not sure if this is my issues, but the value I am being passed for isArchived is 1/0 rather than True/False (the backend team is working to change that). That is why I have the CurValue variable to display the value in the checkbox.
