时间戳

首页 > 解决方案 > 从 React Hooks 中的购物项目中删除项目

javascript - 从 React Hooks 中的购物项目中删除项目

问题描述

在进行有关 React Hooks 的 Codecadamy 练习时，我遇到了一个我无法理解的代码。

在以下代码中检查：onClick={() => removeItem(index)}

<ul>{cart.map((item,index) => <li key={index} onClick={() => removeItem(index)} >{item}</li>)}</ul>

为什么我们不能简单地写： onClick={removeItem(index)} // 当我尝试这样做时，代码不起作用。

onClick={removeItem(index)}虽然我已经完成了代码，但我可以理解和之间的区别onClick={() => removeItem(index)}。

在相同的代码中，以下示例运行良好（当我尝试将项目添加到列表中时。）

{produce.map((item) => <button key={item} value={item} onClick={addItem}>{item}</button>)};

在上面的例子中，onClick={addItem}运行良好。

这是完整的代码：https ://gist.github.com/sixpl/8141196fc688949ccb51b4459e645b34

感谢您的时间。

标签： javascriptreactjsreact-hooks

解决方案

使用{removeItem(argument)}时，您实际上是在进行函数调用。JSX 表达式（你在里面提到的{ }）将被评估并且这个函数将被调用。将其包装在函数中可确保我们指示单击时要调用的内容，而不是调用它。前任：{()=>{ yourActualFunctionCall(argument) }}

使用{addItem}时，您表示单击时要调用的函数是addItem。注意，( )函数后面没有，所以addItem不会调用。

推荐阅读