Axios PUT 无法使用 Typescript 以 React 形式更新记录

Question

我有一个 React 格式，我试图用它来更新记录。我的后端团队为我提供了一个 API，我看到它可以使用 Postman 创建记录，但是当我尝试使用 Axios PUT 时，我首先得到这个 409 错误：

PUT http:// ... /updateRecord/(item id)

react_devtools_backend.js:2655 未处理的承诺拒绝：请求失败，状态码为 409；区域： ;任务：Promise.then；值：AxiosError {消息：“请求失败，状态代码 409”，名称：“AxiosError”，代码：“ERR_BAD_REQUEST”，配置：{...}，请求：XMLHttpRequest，...} undefined

我不知道为什么更新不起作用。如果是我的表格，或者我的 PUT 请求？？

我在使用 POST 请求创建记录时也遇到了类似的问题，但不是 400 和 409 错误，我没有收到任何控制台错误，也没有创建记录。我假设我在此表格上的任何错误也发生在该表格上。我的表单验证工作正常，但我将其包含在此处以供参考。

现在我写了一个非常基本的 Axios PUT，但最终想添加错误处理和显示确认消息的能力。

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>
    );
}

不确定这是否是我的问题，但我为 isArchived 传递的值是 1/0 而不是 True/False（后端团队正在努力改变它）。这就是为什么我有 CurValue 变量来显示复选框中的值。