React+Material UI中Axios更新请求实现问题求助

我是React新手，此前仅在ASP.NET MVC中实现过CRUD功能，目前在React结合Material UI使用Axios实现更新请求时遇到困难，找到的教程都不符合我的场景，或我理解有误。之前得到的提示有帮助，但功能仍无法正常运行，现附上完整相关代码寻求指导（因输入字段过多仅展示部分）。

我通过以下onClick事件唤起模态框：

onClick={()=> {handleEditModal(item)}}

modalFunctions.js #

// Modal Functionality
export function ModalFunctions() {
    const [selectedRecord, setSelectedRecord] = useState([]);
    const [openModal, setOpenModal] = useState(false);

    const handleEditModal = item =>{
        setOpenModal(true)
        setSelectedRecord(item)
    } 

    return {
        selectedRecord,
        setSelectedRecord,
        openModal,
        setOpenModal,
        handleEditModal,
        handleDetailModal
    }
}

// Form Functionality
export function FormFunctions(validateOnChange = false, validate) {
    const [values, setValues] = useState('');
    const [errors, setErrors] = useState({});
  
    const handleInputChange = e => {
        const { name, value } = e.target
        setValues({
            ...values,
            [name]: value
        })
        if (validateOnChange)
            validate({ [name]: value })
    }
    return {errors, handleInputChange, setErrors, setValues, values}
}

DataTable.js #

// Imported Modal Functions
const {
    selectedRecord,
    openModal,
    setOpenModal,
    handleEditModal,
    handleDetailModal
} = ModalFunctions();

const baseURL = 'http://localhost:8080/api/tanks'; 

// Fetch Data
useEffect(() => {
    const fetchData = async () =>{
        setLoading(true);
        try {
            const {data: response} = await axios.get(baseURL);
            setTableData(response);
        } catch (error) {
            console.error(error.message);
        }
        setLoading(false);
    };
    fetchData();
}, [baseURL, setTableData, setLoading]);


// The Modal
return(
    <Modal
            title={ "Editing: " + (selectedRecord.tankName) }
            openModal={openModal}
            setOpenModal={setOpenModal}
        >
                <TankEdit
                    selectedRecord={selectedRecord}
                    setOpenModal={setOpenModal}
                    openModal={openModal} 
                />
        </Modal>
)

TankEdit.js #

export function TankEdit(props) {
    const { baseURL, openModal, selectedRecord, setOpenModal, setTableData } = props;

    const validate = (fieldValues = item) => {
        let temp = { ...errors }
        if ('tankName' in fieldValues)
            temp.tankName = fieldValues.tankName ? "" : "This field is required."
        setErrors({
            ...temp
        })
        if (fieldValues === values)
            return Object.values(temp).every(x => x === " ")
    }

    const {
        values,
        setValues,
        errors,
        setErrors,
        handleInputChange,
    } = FormFunctions(true, validate);

    useEffect(() => {
        if (selectedRecord !== null)
            setValues({
                ...selectedRecord
        })
    }, [selectedRecord, setValues])

    
    function editRecord() {
        axios.put(`${baseURL}`, {
            title: "Success",
            body: "The record had been successfully updated"
        }).then ((response) => {setTableData(response.data);})
    }

    const handleSubmit = e => {
        e.preventDefault()
        if (validate()) {
            editRecord(values);
        }
        setOpenModal(false)
    }

    const item = values; // used for easier referencing (matches table item)

    return (
        <Form onSubmit={handleSubmit} open={openModal}> 
            <Grid>
                <Controls.Input
                    name="tankName"
                    label="Tank Name"
                    value={item.tankName}
                    onChange={handleInputChange}
                    error={errors.tankName}
                />
            </Grid>
            <Grid>
                    <Controls.Button
                        type="submit"
                        text="Submit"
                    />
                    <Controls.Button
                        text="Cancel" 
                        color="default"
                        onClick={()=>{setOpenModal(false)}}
                    />
            </Grid>
        </Form>
    )
}

Input.js #

export default function Input(props) {

    const { error=null, label, name, onChange, value, ...other } = props;
    return (
        <TextField
            variant="outlined"
            label={label}
            name={name}
            value={value}
            defaultValue=''
            onChange={onChange}
            {...other}
            {...(error && {error:true,helperText:error})}
        />
    )
}

公司仅要求实现读取和更新功能，创建与删除将由其他方式处理，这是我最后需要解决的问题，希望能得到指点。

内容的提问来源于stack exchange，提问作者Mtullis