Javascript 我正在尝试创建用户名、密码和管理员选择器重置选项

我想要的是能够重置活动用户的用户名、密码并更改用户的管理员状态。但是，当我更改变量的状态时，更改的状态不会添加到补丁请求中。我想我把它缩小到了我创建的onChange事件的问题。但是我不明白为什么我的州没有被拯救

export default class UpdateUser extends Component{

constructor(props){
    super(props);

    this.onChangeuserName = this.onChangeuserName.bind(this);
    this.onChangepassword = this.onChangepassword.bind(this);
    this.onChangeAdminStatus = this.onChangeAdminStatus.bind(this)
    this.updateUser = this.updateUser.bind(this);
    this.deleteUser = this.deleteUser.bind(this);

    this.state={
        currentUser:{
            id:null,
            userName: '',
            password: '',
            adminStatus:false
        },
        message: '',

    };
}

componentDidMount()
{
    this.getUser(this.props.match.params.id);
}

componentWillUnmount()
{
    this.setState = (state, callback) =>
        {
            return;
        };
}

onChangeuserName(e){
    const userName = e.target.value;

    this.setState(function (prevState)
    {
        return{
            currentUser:
            {
                ...prevState.currentUser,
                userName:userName
            }
        };
    });
}

onChangepassword(e){
    const password = e.target.value;

    this.setState(function (prevState)
    {
        return{
            currentUser:
            {
                ...prevState.currentUser,
                password:password
            }
        };
    });
}

onChangeAdminStatus(e)
{
    const adminStatus  = e.target.checked;
    console.log(e.target.checked);
    this.setState(function(prevState)
    {
        return{
            currentUser:
            {
                ...prevState.currentUser,
                adminStatus:adminStatus
            }
        };
    });
}

getUser(id)
{
    UserDataService.get(id)
        .then(response=>
            {
                this.setState({
                    currentUser:response.data
                });
                console.log(response.data);
            })
        .catch(e=>
            {
                console.log(e);
            });
}

updateUser()
{
    UserDataService.update(
        this.state.currentUser._id,
        this.state.currentUser
    )
        .then(response =>
            {
                console.log(response.data);
                this.setState({
                    message: "The User's credentials were updated successfully!"
                });
            })
        .catch(e=>
            {
                console.log(e);
            });
}

deleteUser(){
    UserDataService.delete(this.state.currentUser._id)
        .then(response =>{
            console.log(response.data);
            this.props.history.push('/users');
        })
        .catch(e=>
            {
                console.log(e);
            })
}





render()
{
    const{currentUser} = this.state;

    return(

        <div className="col-md-6">
            {currentUser ? (

                <div className="edit-form">
                    
                    <div className="d-flex justify-content-center">

                    </div>
                    <h4>Update User</h4>
                    <form>
                    <div className="form-row d-flex justify-content-center">
                            <div className="form-group col-md-6">
                                <label for="userName">Username: </label>
                                <input type="text" className="form-control" id="userName" value={currentUser.userName} onChange={this.onChangeuserName} placeholder="Username" name="userName"></input>

                            </div>
                        </div>
                        <div className="form-row d-flex justify-content-center">
                            <div class="form-group col-md-6">
                                <label for="password">Password: </label>
                                <input type="text" className="form-control" id="password"  onChange={this.onChangepassword} placeholder="New Password" name="password"></input>

                            </div>
                        </div>

                        <div className="form-row d-flex justify-content-center">
                            <button onClick={this.updateUser} type="button" className="badge badge-success">Update</button>
                            <button onClick={this.deleteUser} type="button" className="badge badge-danger mr-2">Delete</button>
                            
                            <input     onChange={this.onChangeAdminStatus} className="AdminCheck" type="checkbox" id="AdminCheck" />
                            <label  for="AdminCheck">Make User an Admin</label>
                            <div>
                                <br/>
                                <p>{this.state.message}</p>
                            </div>
                        </div>
                    </form>
                </div>

            ) : (
                <div>
                    <br/>
                    <p>Please click on a Tutorial...</p>
                </div>
            
            )}
        </div>
    )
}

导出默认类UpdateUser扩展组件{
建造师（道具）{
超级（道具）；
this.onChangeuserName=this.onChangeuserName.bind（this）；
this.onChangepassword=this.onChangepassword.bind（this）；
this.onChangeAdminStatus=this.onChangeAdminStatus.bind（this）
this.updateUser=this.updateUser.bind（this）；
this.deleteUser=this.deleteUser.bind（this）；
这个州={
当前用户：{
id:null，
用户名：“”，
密码：“”，
管理员状态：false
},
消息：“”，
};
}
componentDidMount（）
{
this.getUser（this.props.match.params.id）；
}
组件将卸载（）
{
this.setState=（状态，回调）=>
{
返回；
};
}
onChangeuserName（e）{
const userName=e.target.value；
this.setState（函数（prevState）
{
返回{
当前用户：
{
…prevState.currentUser，
用户名：userName
}
};
});
}
onChangepassword（e）{
const password=e.target.value；
this.setState（函数（prevState）
{
返回{
当前用户：
{
…prevState.currentUser，
密码：密码
}
};
});
}
onChangeAdminStatus（e）
{
const adminStatus=e.target.checked；
console.log（e.target.checked）；
this.setState（函数（prevState）
{
返回{
当前用户：
{
…prevState.currentUser，
adminStatus:adminStatus
}
};
});
}
getUser（id）
{
UserDataService.get（id）
。然后（响应=>
{
这是我的国家({
当前用户：response.data
});
console.log（response.data）；
})
.catch（e=>
{
控制台日志（e）；
});
}
updateUser（）
{
UserDataService.update(
this.state.currentUser.\u id，
this.state.currentUser
)
。然后（响应=>
{
console.log（response.data）；
这是我的国家({
消息：“用户的凭据已成功更新！”
});
})
.catch（e=>
{
控制台日志（e）；
});
}
deleteUser（）{
UserDataService.delete（this.state.currentUser.\u id）
。然后（响应=>{
console.log（response.data）；
this.props.history.push（'/users'）；
})
.catch（e=>
{
控制台日志（e）；
})
}
render（）
{
const{currentUser}=this.state；
返回(
{当前用户(
更新用户
用户名：
密码：
更新
删除
使用户成为管理员


{this.state.message}

) : (


请点击教程

)}
)
}

---

}

我认为问题出在这个。设置每个onChange函数的状态，请检查。此外，您可以使用[e.target.name]作为输入键，尝试只使用一个onChange函数。