无法从 React Material-ui 输入文本字段

Question

我正在更新我的react项目的形式。我只想在更新表单中显示当前状态，用户将能够更新当前值。所以我使用的输入字段的反应材料界面文本框。我从后端获取数据，并使用valueprop为每个输入字段设置当前值。

下面是我的代码:

const EditRoles = () => {
const { idrole } = useParams();
const history = useNavigate();
const [roleData, setRoleData] = useState([]);
const [RoleName, setRoleName] = useState();

//role info
useEffect(() => {
axios.get(`http://localhost:3001/role/view/${idrole}`).then((response) => {
setRoleData({ ...response.data[0] });
});
}, [idrole]);

const EditRole = async (idrole) => {
await axios
.put('http://localhost:3001/role/edit', {
roleName: RoleName,
description: Description,
idrole: idrole,
})
.then(() => {
swal({
text: 'Role updated successfully',
icon: 'success',
timer: 6000,
buttons: false,
});
});
setRoleName('');
setDescription('');
};

return (
<>
<div className="formPage">
<Header title="Edit Role" />
<div className="FormContainer">
<form
onSubmit={() => {
EditRole(idrole);
}}
>
<FormLabel color="success" required="true" className="label">
Role Name
</FormLabel>
<br />
<TextField
style={{ paddingBottom: '30px' }}
variant="outlined"
fullWidth
name="roleName"
onChange={(e) => {
setRoleName(e.target.value);
}}
value={roleData.roleName}
/>
<br />

<div style={{ paddingTop: '50px' }}>
<span style={{ paddingLeft: '55%' }}>
<Button
variant="contained"
color="info"
type="submit"

>
Save
</Button>
</span>
<span style={{ paddingLeft: '10%' }} onClick={() => history(-1)}>
<Button variant="contained" color="secondary">
<ArrowBackIosNewIcon fontSize="small" />
Back
</Button>
</span>
</div>
</form>
</div>
</div>
</>
);
};
export default EditRoles;

所以在我的情况下，数据被获取，并使用value在TextField中显示成功，但我不能在TextField中键入。如果我使用defaultValue，获取的数据将不会显示在文本字段中。

有人能帮助我了解我需要做什么来解决我的问题吗?

Answer 1

我认为这是因为你在onChange中更新RoleName，而你在值字段中使用roleData.roleName。有两种方法可以解决这个问题。

1. 在useEffect中将setRoleData({ ...response.data[0] });更改为setRoleName(response.data[0].roleName);
   
   或
   
   
2. 在onChange中将setRoleName(e.target.value);更改为setRoleData({ ...roleData, roleName: e.target.value });