## 实例
```jsx
// ItemList.js
// 给 每一个storeItems 列表中的数组值创建为 button
import React from "react";
//它接受两个属性：`items`（一个项目数组）和 `onItemClick`（一个当项目被点击时调用的函数）。
export default function ItemList({ items, onItemClick }) {
const handleClick = ({ target }) => {
const item = target.value;
//当 item被点击时调用onItemClick[[React Hooks useState 事件处理程序更新状态]]
onItemClick(item);
};
return (
// 遍历 items 数组，为每个 item 创建一个 button 按钮，按钮的值为 item，当按钮被点击时，调用onItemClick(item);函数，显示在GroceryCart.js的<ul></ul>位置
<div>
{items.map((item, index) => (
<button value={item} onClick={handleClick} key={index}>
{item}
</button>
))}
</div>
);
}
```
```jsx
import React, { useState } from "react";
import ItemList from "./ItemList";
import { produce, pantryItems } from "./storeItems";//所有数组值
export default function GroceryCart() {
// 声明并初始化状态
const [cart,setCart] = useState([]);//初始条件为空的数组
// setCart更新状态：添加新的 item 到之前的 prev 中
const addItem = (item) => {
setCart((prev)=> {return [item,...prev]})
};
// setCart更新状态：筛选之前的 item，- 如果 `index` 不等于 `targetIndex`，这意味着这个元素不是我们想要移除的那个，所以条件为 `true`，这个元素会被保留在新的数组中。
- //如果 `index` 等于 `targetIndex`，这意味着这个元素就是我们想要移除的那个，所以条件为 `false`，这个元素会被排除出新的数组。
const removeItem = (targetIndex) => {
setCart((prev) => {
return prev.filter((item, index) => index !== targetIndex);
});
};
// 渲染效果
return (
<div>
//H1 标题
<h1>Grocery Cart</h1>
//
<ul>
{cart.map((item, index) => (
//当我们需要传递一个手动参数时，jsx事件处理程序需要用到箭头函数
<li onClick={() => removeItem(index)} key={index}>
//这里的 item 来自于const item = target.value;
{item}
</li>
))}
</ul>
// h2 标题
<h2>Produce</h2>
// 调用ItemList.js，查看ItemList.js会发现有 2 个参数，items 和onItemClick, items负责将每个数组值渲染成按钮，onItemClick负责当一个按钮被点击时返回的函数，这里返回新添加物品。
<ItemList items={produce} onItemClick={addItem} />
<h2>Pantry Items</h2>
<ItemList items={pantryItems} onItemClick={addItem} />
</div>
);
}
```
## 分析
```jsx
export default function ItemList({ items, onItemClick }) {
const handleClick = ({ target }) => {
const item = target.value;
onItemClick(item);
return (
<button value={item} onClick={handleClick} key={index}>
{item}
</button>
)
};
```
```jsx
export default function GroceryCart() {
const [cart,setCart] = useState([]);//初始值要设定为空的数组
const addItem = (item) => {
setCart((prev)=> {return [item,...prev]}) //新的状态，新的 item 加上以前的 item
};
```
- [Object 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/objects-in-state)