## 实例
```jsx
import React, { useState } from "react";
export default function EditProfile() {
const [profile, setProfile] = useState({});//在更新对象时，`useState({});`中添加花括号；
const handleChange = ({ target }) => {
const {name,value} = target; // 处理更新的事件处理程序
setProfile((prev)=>({
...prev,
[name]: value
}));
}; // 之所以要在箭头函数后面添加`()`是因为怕对象的花括号会与函数的花括号混淆
const handleSubmit = (event) => {
event.preventDefault();
alert(JSON.stringify(profile, '', 2));
}; // submit 后在页面上返回的内容
return (
<form onSubmit={handleSubmit}>
<input
value={profile.firstName || ''}
name="firstName"
type="text"
placeholder="First Name"
onChange={handleChange}
/>
<input
value={profile.lastName || ''}
type="text"
name="lastName"
placeholder="Last Name"
onChange={handleChange}
/>
<input
value={profile.bday || ''}
type="date"
name="bday"
onChange={handleChange}
/>
<input
value={profile.password || ''}
type="password"
name="password"
placeholder="Password"
onChange={handleChange}
/>
<button type="submit">Submit</button>
</form>
);
}
```
- [Arrays in State](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-ii/modules/wdcp-22-function-components-and-hooks-a2dba9bf-fc64-4118-8656-dfdc35f9e5cc/lessons/the-state-hook/exercises/arrays-in-state)