Reactjs 即使在绑定事件处理程序之后，表单值也不会更新

我正在尝试构建一个编辑模式，允许用户更新员工信息，而无需重新路由。我已经构建了模态并将其插入到employeeCard组件中（这是我知道的最好的方法，在这一点上）。但是，尽管编写了handleFieldChange函数并试图在modalOpen上重置状态，但我无法更改模式输入字段中的信息

我希望能够更改模式中预先填充的各个字段，并单击submit按钮，将新信息编译成对象并发布到数据库中

为了节省空间等等，我只发布了足够的代码来显示模式中的第一个编辑字段。模式正在渲染和预填充，但我无法更改任何内容

欢迎提供任何帮助或建议。谢谢大家!

export default class EmployeeCard extends Component {
state = {
    open: false,
    name: "",
    surname: "",
    email: "",
    phone: "",
    address: "",
    city: "",
    state: "",
    zip: "",
    image: "",
    hireDate: ""
};

onOpenModal = () => {
    // this.setState({ open: true });
    return userAPImgr.getOneUser(this.props.match.params.employeeId)
        .then(employee => {
            this.setState({
                name: employee.name,
                surname: employee.surname,
                email: employee.email,
                phone: employee.phone,
                address: employee.address,
                city: employee.city,
                state: employee.state,
                zip: employee.zip,
                hireDate: employee.hireDate,
                open: true
            });
        })
    }

            onCloseModal = () => {
                this.setState({ open: false });
            };

            handleFieldChange = evt => {
                const stateToChange = {}
                stateToChange[evt.target.id] = evt.target.value
                this.setState(stateToChange)
            }

            updateEmployee = evt => {
                evt.preventDefault()

                // if (this.state.employee === "") {
                //     window.alert("Please select a caretaker");
                // } else {
                const editedEmployee = {
                    id: parseInt(this.props.match.params.employeeId),
                    name: this.state.name,
                    surname: this.state.surname,
                    email: this.state.email,
                    phone: this.state.phone,
                    address: this.state.address,
                    city: this.state.city,
                    state: this.state.state,
                    zip: this.state.zip,
                    hireDate: this.state.hireDate,
                    companyId: parseInt(sessionStorage.getItem("companyId")),
                    userType: "employee"
                };

                this.props.updateUser(editedEmployee, this.props.match.params.employeeId)
                    .then(() => this.props.history.push("/employees"))
            }


            render() {
                const { open } = this.state;
                return (
                    <div key={this.props.employee.id} className="empCard">
                        <div className="empCardBody">
                            <h3 className="empCardTitle">
                                {/* <img src={this.props.employee.image} alt={this.props.employee.name} className="empImg" /> */}
                                <p>{this.props.employee.name} {this.props.employee.surname}</p>
                                <p>{this.props.employee.email}</p>
                                <p>{this.props.employee.phone}</p>
                                <p>{this.props.employee.address}</p>
                                <p>{this.props.employee.city}, {this.props.employee.state} {this.props.employee.zip}</p>

                                <button className="btn btn-primary" onClick={this.onOpenModal}>Edit Employee</button>
                                {/* this.props.history.push(`/employees/${this.props.employee.id}/edit`)} >Edit Employee</button> */}
                                <br></br>
                                <button onClick={() => this.props.deleteEmp(this.props.employee.id)}
                                    className="btn btn-danger">Fire Employee
                    </button>
                            </h3>
                        </div>
                        <div style={styles}>
                            <Modal open={open} onClose={this.onCloseModal} center>
                                <h2>Edit Employee Info</h2>
                                <form className="employeeForm">
                                    <div className="form-group">
                                        <label htmlFor="name">First Name</label>
                                        <input
                                            type="text"
                                            required
                                            className="form-control"
                                            onChange={this.handleFieldChange}
                                            id="name"
                                            placeholder="First Name"
                                            value={this.props.employee.name}
                                        />
                                        <br></br>

导出默认类EmployeeCard扩展组件{
状态={
开：错，
姓名：“，
姓：“，
电邮：“，
电话：“，
地址：“，
城市：“，
州：“，
邮政编码：“，
图像：“”，
雇佣者：“
};
onOpenModal=（）=>{
//this.setState（{open:true}）；
返回userAPImgr.getOneUser（this.props.match.params.employeeId）
。然后（雇员=>{
这是我的国家({
name:employee.name，
姓氏：雇员。姓氏，
电子邮件：employee.email，
电话：employee.phone，
地址：employee.address，
城市：雇员城市，
州：employee.state，
zip:employee.zip，
雇佣日期：employee.hireDate，
开放：是的
});
})
}
onCloseModal=（）=>{
this.setState（{open:false}）；
};
handleFieldChange=evt=>{
常量stateToChange={}
stateToChange[evt.target.id]=evt.target.value
this.setState（stateToChange）
}
updateEmployee=evt=>{
evt.preventDefault（）
//如果（this.state.employee==“”）{
//窗口提示（“请选择管理员”）；
//}其他{
const editedEmployee={
id:parseInt（this.props.match.params.employeeId），
名称：this.state.name，
姓：this.state.姓氏，
电子邮件：this.state.email，
电话：这个州的电话，
地址：this.state.address，
城市：这个州，这个城市，
州：这个州，
zip:this.state.zip，
hireDate:this.state.hireDate，
companyId:parseInt（sessionStorage.getItem（“companyId”），
用户类型：“雇员”
};
this.props.updateUser（editedEmployee，this.props.match.params.employeeId）
.然后（（）=>this.props.history.push（“/employees”））
}
render（）{
const{open}=this.state；
返回(
{/*  */}
{this.props.employee.name}{this.props.employee.name}

{this.props.employee.email}

{this.props.employee.phone}

{this.props.employee.address}

{this.props.employee.city}，{this.props.employee.state}{this.props.employee.zip}

编辑员工
{/*this.props.history.push（`/employees/${this.props.employee.id}/edit`）}>edit employee*/}



this.props.deleteEmp（this.props.employee.id）}
className=“btn btn危险”>火灾员工
编辑员工信息
名字

您就快到了！您需要显示state中的值！检查我添加的注释作为

/**FIX**:

export default class EmployeeCard extends Component {
state = {
    open: false,
    name: "",
    surname: "",
    email: "",
    phone: "",
    address: "",
    city: "",
    state: "",
    zip: "",
    image: "",
    hireDate: ""
};

onOpenModal = () => {
    // this.setState({ open: true });
    return userAPImgr.getOneUser(this.props.match.params.employeeId)
        .then(employee => {
            this.setState({
                name: employee.name,
                surname: employee.surname,
                email: employee.email,
                phone: employee.phone,
                address: employee.address,
                city: employee.city,
                state: employee.state,
                zip: employee.zip,
                hireDate: employee.hireDate,
                open: true
            });
        })
    }

            onCloseModal = () => {
                this.setState({ open: false });
            };

            handleFieldChange = evt => {

                //const stateToChange = {}
                //stateToChange[evt.target.id] = evt.target.value
                //this.setState(stateToChange)
                //**FIX**: you have to include other states that have not changed in the new state

                const updatedState = {
                    ...this.state, // This is called the spread operator
                    [evt.target.id] : evt.target.value
                }
                this.setState(updatedState)

            }

            updateEmployee = evt => {
                evt.preventDefault()

                // if (this.state.employee === "") {
                //     window.alert("Please select a caretaker");
                // } else {
                const editedEmployee = {
                    id: parseInt(this.props.match.params.employeeId),
                    name: this.state.name,
                    surname: this.state.surname,
                    email: this.state.email,
                    phone: this.state.phone,
                    address: this.state.address,
                    city: this.state.city,
                    state: this.state.state,
                    zip: this.state.zip,
                    hireDate: this.state.hireDate,
                    companyId: parseInt(sessionStorage.getItem("companyId")),
                    userType: "employee"
                };

                this.props.updateUser(editedEmployee, this.props.match.params.employeeId)
                    .then(() => this.props.history.push("/employees"))
            }


            render() {
                const { open } = this.state;
                return (
                    <div key={this.props.employee.id} className="empCard">
                        <div className="empCardBody">
                            <h3 className="empCardTitle">
                                {/* <img src={this.props.employee.image} alt={this.props.employee.name} className="empImg" /> */}
                                <p>{this.props.employee.name} {this.props.employee.surname}</p>
                                <p>{this.props.employee.email}</p>
                                <p>{this.props.employee.phone}</p>
                                <p>{this.props.employee.address}</p>
                                <p>{this.props.employee.city}, {this.props.employee.state} {this.props.employee.zip}</p>

                                <button className="btn btn-primary" onClick={this.onOpenModal}>Edit Employee</button>
                                {/* this.props.history.push(`/employees/${this.props.employee.id}/edit`)} >Edit Employee</button> */}
                                <br></br>
                                <button onClick={() => this.props.deleteEmp(this.props.employee.id)}
                                    className="btn btn-danger">Fire Employee
                    </button>
                            </h3>
                        </div>
                        <div style={styles}>
                            <Modal open={open} onClose={this.onCloseModal} center>
                                <h2>Edit Employee Info</h2>
                                <form className="employeeForm">
                                    <div className="form-group">
                                        <label htmlFor="name">First Name</label>
                                        <input
                                            type="text"
                                            required
                                            className="form-control"
                                            onChange={this.handleFieldChange}
                                            id="name"
                                            placeholder="First Name"
                                            value={this.state.name}
                                            //**FIX**: show value from state not props
                                        />
                                        <br></br>

导出默认类EmployeeCard扩展组件{
状态={
开：错，
姓名：“，
姓：“，
电邮：“，
电话：“，
地址：“，
城市：“，
州：“，
邮政编码：“，
图像：“”，
雇佣者：“
};
onOpenModal=（）=>{
//this.setState（{open:true}）；
返回userAPImgr.getOneUser（this.props.match.params.employeeId）
。然后（雇员=>{
这是我的国家({
name:employee.name，
姓氏：雇员。姓氏，
电子邮件：employee.email，
电话：employee.phone，
地址：employee.address，
城市：雇员城市，
州：employee.state，
zip:employee.zip，
雇佣日期：employee.hireDate，
开放：是的
});
})
}
onCloseModal=（）=>{
this.setState（{open:false}）；
};
handleFieldChange=evt=>{
//常量stateToChange={}
//stateToChange[evt.target.id]=evt.target.value
//this.setState（stateToChange）
//**修正**：您必须在新状态中包含未更改的其他状态
常量updatedState={
…this.state，//这是calle