我对React很陌生，我唯一做过的CRUD功能是在www.example.com上MVC.net，所以我在这里很困惑，我找到的教程似乎都不是我正在进行的情况...或者也许我只是误解了它们。我最初的问题得到的提示帮助了我，但我仍然没有让它工作，所以希望现在我有足够的信息来帮助其他人帮助我。我没有包括所有的输入字段，因为他们像15，这只是多余的。
我将使用此onClick事件调出模态：

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

模态函数.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}
}

数据表.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>
    )

油罐编辑.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>
    )
}

输入.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})}
        />
    )
}

我的公司只需要一个读取和更新功能，因为创建和删除将以另一种方式处理，所以这是我最后的挂机。我想我已经接近了，但我错过了一些东西。
谁能给我指个方向？
谢谢！