Reactjs 文本字段上的设置值输入文本变为不可编辑

我正在创建一个表单，用于更新mongodb中的数据。我能够获取数据并添加onchange。如果currentId存在，则所有数据都将填充到表单中，但我的问题是我无法编辑或无法在输入中键入任何内容来编辑值。我真的需要你的眼睛去看到错过或错过的东西。谢谢大家

配置文件容器

import React，{useState，useffect}来自“React”；
从'react redux'导入{useDispatch，useSelector}；
从“../../../actions/profile”导入{getProfile}//获取方法
从“/Profile”导入配置文件；
函数索引（）{
const dispatch=usedpatch（）；
const posts=useSelector（（state）=>state.posts）；
const currentId=useState（null）；
useffect（（）=>{
调度（getProfile（））；
}，[currentId，dispatch]）；
返回(
{posts.map（（个人资料）=>(
))}
);
}
出口违约指数；

轮廓形状组件

import'/Profile.css'；
从“React”导入{React，useState，useEffect}；
从“反应引导/按钮”导入按钮；
从“@material ui/core”导入{TextField}；
从'react redux'导入{useDispatch，useSelector}；
从“../../../actions/profile”导入{updateProfile}；
常量配置文件=（{Profile，currentId}）=>{
const dispatch=usedpatch（）；
currentId=配置文件。\u id；
const[postData，setPostData]=useState(
{
简介：{
姓名：“，
说明：“，
电邮：“，
编号：“，
}
}
);
const post=useSelector（（state）=>currentId？state.posts.find（（p）=>p.。\u id==currentId）：null）；
useffect（（）=>{
如果（post）设置POSTDATA（post）；
}，[张贴]）
常量handleSubmit=（e）=>{
e、 预防默认值（）；
如果（当前ID）{
调度（updateProfile（currentId，postData））；
}
}
//const[ImageFileName，setImageFileName]=useState（“上传配置文件图片”）；
//const[fileName，setFileName]=useState（“上传CV”）；
返回(
setPostData（{…postData，名称：e.target.value}）
/>
setPostData（{…postData，描述：e.target.value}）
全宽
/>
setPostData（{…postData，电子邮件：e.target.value}）
/>
setPostData（{…postData，编号：e.target.value}）
/>
拯救
);
}
导出默认配置文件；

例如，如果您查看

name

字段，您可以看到值为

postData.profile.name

，而

onChange

您的设置

postData.name

尝试设置配置文件对象，例如：

onChange={(e) => setPostData({ ...postData, profile: { ...postData.profile, name: e.target.value } })}

---

您好，我可以输入，但在输入3-4个字母后，该值将恢复到原始值。我想我看到了问题。在devtools网络选项卡中，我看到正在无限地调用api get方法。

import './Profile.css';
import { React, useState, useEffect }  from 'react';
import Button from 'react-bootstrap/Button';
import { TextField  } from '@material-ui/core';
import { useDispatch, useSelector } from 'react-redux';
import { updateProfile } from '../../../actions/profile';

 const Profile = ({ profile, currentId }) => {
    const dispatch = useDispatch();
    currentId = profile._id;
    const [postData, setPostData] = useState(
        {
            profile: {
                name: "",
                description: "",
                email: "",
                number: "",
            }
                
        }
    );

    const post = useSelector((state) => currentId ? state.posts.find((p) => p._id === currentId) : null);
    
    useEffect(() => {
        if(post) setPostData(post);
    }, [post])

    const handleSubmit = (e) => {
        e.preventDefault();

        if(currentId) {
            dispatch(updateProfile(currentId, postData));
        }
    }

    // const [ImageFileName, setImageFileName] = useState("Upload Profile Picture");
    // const [fileName, setFileName] = useState("Upload CV");
  
    return (
        <form autoComplete="off" noValidate className="form" onSubmit={handleSubmit}>
            
            <TextField
            id="name"
            name="name"
            className="name"
            label="Full Name"
            variant="outlined"
            value={postData.profile.name}
            onChange={(e) => setPostData({ ...postData, name: e.target.value })}
            />

            <TextField
            id="outlined-multiline-static"
            label="Multiline"
            multiline
            rows={4}
            variant="outlined"
            size="small"
            className="mb-3"
            name="description"
            value={postData.profile.description}
            onChange={(e) => setPostData({ ...postData, description: e.target.value })}
            fullWidth
            />

            <TextField
            id="email"
            label="Email"
            variant="outlined"
            size="small"
            className="mb-3"
            name="email"
            value={postData.profile.email} 
            onChange={(e) => setPostData({ ...postData, email: e.target.value })}
            />
            <TextField
            id="phone"
            label="Phone Number"
            variant="outlined"
            size="small"
            name="phone"
            value={postData.profile.number}
            onChange={(e) => setPostData({ ...postData, number: e.target.value })}
            />
            <Button variant="light" type="submit" className="Save">Save</Button>
        </form>
    );
}

export default Profile;

onChange={(e) => setPostData({ ...postData, profile: { ...postData.profile, name: e.target.value } })}