ReactJS中MUI TextField编辑API数据时无法输入的问题求助

问题场景 #

在MUI DataGrid中编辑API返回的数据，点击编辑图标弹出模态表单，其他功能正常，能正确获取待编辑数据，但TextField中的值无法修改，输入内容无响应。

问题原因 #

1. handleChange函数逻辑错误：当前写法返回的是一个函数，而非更新后的表单数据对象，导致setformInputData无法正确更新状态。
2. TextField的name属性与表单状态key不匹配：表单状态的key是name和details，但TextField的name分别设为"Nick Name"和"Amount"，更新时找不到对应属性，无法修改值。

修复方案 #

1. 修正handleChange函数 #

将原来的函数改为直接生成新的表单数据对象，或者正确使用函数式更新：

const handleChange = (evnt) => {
  const { name, value } = evnt.target;
  setformInputData(prev => ({
    ...prev,
    [name]: value
  }));
}

2. 匹配TextField的name属性 #

修改两个TextField的name属性，与formInputData的key保持一致：

• 第一个TextField的name改为name
• 第二个TextField的name改为details

完整修复后的代码 #

export default function ContactsCard(props) {
 const [ContactData, setContactData] = useState([]);
 const [open, setOpen] = useState(false);
 const [formInputData, setformInputData] = useState(
   {
     name: '',
     details: '',
   }
 );

 // 修复：修正handleChange函数逻辑
 const handleChange = (evnt) => {
   const { name, value } = evnt.target;
   setformInputData(prev => ({
     ...prev,
     [name]: value
   }));
 }

 const showData = () => {
   axios.get('http://localhost:8006/api/v2/get/beneficiaries-list').then(function (res) {
     try {
       var result = res.data;
       setContactData(result.data)
     }
     catch (error) {
       console.log(error)
     }
   })
 }

 const handleSubmit = (evnt) => {
   evnt.preventDefault();
   const formData = new FormData();    
   formData.append('nickname', formInputData.name);   
   formData.append('target', formInputData.details);
   const config = {
     headers: { 'content-type': 'multipart/form-data' }
   }
   axios.post('http://localhost:8006/api/v2/save/beneficiary', formData, config)
     .then(response => {
       if (response.data.success === true) {
         showData()
         alert(response.data.message)
       }
     })
     .catch(error => {
       alert(error.message);
     });
   setformInputData({ name: "", details: "" });
   setOpen(false);
 }

 const handleEdit = (id) => {
   var edit_id = id.row.id
   console.log(edit_id)
   setOpen(true)
   setformInputData(ContactData.find((data) => data.id === edit_id))
 }

 const handleOpen = () => setOpen(true)

 const handleClose = () => setOpen(false);

 useEffect(() => {
   showData();
 }, [])

 const handleDelete = (id) => {
   var del_id = id.row.id
   console.log(del_id)
   axios.post('http://localhost:8006/api/v2/remove/beneficiary/', { id: del_id }).then(res => {
     console.log(res.data)
     if (res.data.success === true) {
       alert(res.data.message)
       showData();
     }
   })
 };

 const columns = [
   { field: 'name', headerName: 'Nick Name', width: '130' },
   { field: 'details', headerName: 'Deposit address', width: '130' },
   {
     field: 'actions',
     type: 'actions',
     width: '130',
     headerName: 'Actions',
     cellClassName: 'actions',
     renderCell: (id) => {
       return (
         <>
           <IconButton color="primary" onClick={(e) => { handleEdit(id) }}>
             <EditIcon />
           </IconButton>
           <IconButton color="error"  onClick={(e) => {
             handleDelete(id)
           }}>
             <DeleteIcon />
           </IconButton>
         </>
       );
     },
   },
 ];

return (
<Card {...props}>
  <CardContent>
    <ContactDataGrid rows={ContactData} columns={columns} />
    <Modal
      aria-labelledby="transition-modal-title"
      aria-describedby="transition-modal-description"
      open={open}
      onClose={handleClose}
      closeAfterTransition
      BackdropComponent={Backdrop}
      BackdropProps={{
        timeout: 500,
      }}
    >
      <Fade in={open}>
        <FormControl sx={style} mt={1} >
          <Typography sx={{ fontSize: 16, fontWeight: 'bold' }} color="text.secondary" gutterBottom>
            Edit Contact
          </Typography>
          <Stack flexDirection='column' gap={1.5} mt={1}>
            <TextField autoFocus required
              id="filled-hidden-label-small"
              label="Nick Name" variant="outlined" size="small"
              onChange={handleChange}
              value={formInputData.name}
              name="name" {/* 修复：匹配formInputData的key */}
              className="form-control"
            />
            <TextField required
              id="filled-hidden-label-small"
              label="Deposit Address" variant="outlined" size="small"
              onChange={handleChange}
              value={formInputData.details}
              name="details" {/* 修复：匹配formInputData的key */}
              className="form-control"
            />
          </Stack>
          <Stack flexDirection='row' justifyContent={'center'} gap={1.5} mt={1}>
            <Button
              variant="contained"
              type="submit" color="error"
              onClick={handleClose}
              sx={{ alignSelf: 'center' }} >Cancel</Button>
            <Button
              variant="contained"
              type="submit"
              onClick={handleSubmit}
              sx={{ alignSelf: 'center', backgroundColor: '#000073' }} >Submit</Button>
          </Stack>
        </FormControl>
      </Fade>
    </Modal>
  </CardContent>
</Card>
);
}

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