我想创建一个表单来编辑使用配置文件。表单呈现来自user对象的数据。我想使用React的useState Hook来保持表单的状态，并且我想使用onChange函数来处理对整个用户对象的更改，从而保留一个对象来跟踪表单的更改。为什么不起作用？
function Profile() {
const [user, setUser] = useState({});
const [errors, setErrors] = useState({});
useEffect(() => {
axios.get(`/api/v1/users/me`)
.then(res => setUser(res.data.user))
}, [])
const onChange = e => {
user[e.target.name] = e.target.value;
setUser(user)
}
return (
< div >
<form onSubmit={null}>
<div className="form-group">
<label htmlFor={user.name}>Name</label>
<input type="text" name="name"
className={`form-control form-control-lg ${errors.name ? 'is-invalid' : ''}`}
onChange={onChange} placeholder="Fred Flintstone" value={user.name || ''}
/>
</div>
<div className="form-group">
<label htmlFor="email">Email</label>
<input type="email" name="email"
className={`form-control form-control-lg ${errors.email ? 'is-invalid' : ''}`}
onChange={onChange} placeholder="fred.flintstone@aol.com" value={user.email || ''}
/>
</div>
<div className="form-group">
<label htmlFor="username">Username</label>
<input type="text" name="username"
className={`form-control form-control-lg ${errors.username ? 'is-invalid' : ''}`}
onChange={onChange} placeholder="yabadabadu" value={user.username || ''}
/>
</div>
</form>
<div>
<button type="button" className="btn btn-light btn-sm float-right" onClick={() => console.log("Logout")}>Logout</button>
</div>
</div >
)
}
您正在修改用户对象。调用setUser(user(时，表单不会重新呈现，因为用户对象的标识没有更改。
您所在的位置：
const onChange = e => {
user[e.target.name] = e.target.value;
setUser(user)
}
你想要的是这样的东西：
const onChange = useCallback((event) => {
const {name, value} = event.target;
setUser(oldUser => {
return {
...user,
[name]: value,
};
});
}, [setUser]);
一般来说，您通常不希望在React中修改状态对象。
您应该制作users的副本，否则它将不会触发渲染阶段，因为React会与以前的状态进行浅层比较。
const onChange = ({ target: { name, value } }) => {
setUser(user => ({ ...user, [name]: value }));
};
setState()将始终导致重新渲染，除非shouldComponentUpdate((返回false。如果使用可变对象，并且不能在shouldComponentUpdate((中实现条件呈现逻辑，则仅在新状态与以前的状态不同时调用setState()将避免不必要的重新呈现。
- setState API