添加挂钩

你可以使用效果挂钩来监视应用程序的状态，并运行代码来响应更新。我们使用 useEffect 来注册要运行的函数，以响应更改。

方案

利用我们的应用程序，用户可以点击各项原料，将其标记为“已准备就绪”。如果尚未准备好某些项，我们希望显示“继续准备”消息。所有项都准备好后，我们希望显示“准备工作已完成！”

我们将通过添加新状态对象来设置此行为。我们将更新效果挂钩中的对象。

重要

在示例中，我们修改了 useEffect 中的状态。默认情况下，只要任何有状态对象被修改，useEffect 就会运行。此行为可能会造成无限循环。在此循环中，我们修改状态，挂钩随即运行，这会使状态发生更改，Hook 又因此而运行，等等。

为避免无限循环，可以使用 useEffect 上的依赖项参数来仅查看一个对象。我们将在创建代码时执行此操作。

打开 App.jsx 文件。
若要添加新的状态属性，请将以下代码插入到显示 TODO: Add new state property 的行之后。
```
// TODO: Add new state property
const [ prepared, setPrepared ] = useState(false);
```

若要添加效果挂钩侦听器，请在显示 TODO: Add the effect hook 的行下面插入以下代码。

// TODO: Add the effect hook
useEffect(() => {
    setPrepared(recipe.ingredients.every(i => i.prepared));
}, [recipe]);

代码使用 setPrepared 来更新 prepared。它使用 every 方法，该方法根据与所指定的条件匹配的每个项返回一个布尔值。在本例中，我们将检查是否已准备好每项原料。如果没有，此方法返回 false。

useEffect 上的第二个参数设置为 [recipe]。此设置提供了依赖项，确保仅当 recipe 对象发生更改时，代码才运行。

现在，如果准备工作已完成，则向用户显示消息。为此，请在显示 TODO: Add the prep work display 的行下面添加以下代码。

{/* TODO: Add the prep work display */}
{ prepared ? <h2>Prep work done!</h2> : <h2>Just keep chopping.</h2>}

查看 prepared 对象。如果为 true，我们会显示“准备工作已完成！”，否则，我们显示“继续准备”。