安装组件时自动触发onClick中的功能[重复]答案

【问题标题】：Automatically triggered a function in a onClick while mounting the component [duplicate]安装组件时自动触发onClick中的功能[重复]
【发布时间】：2021-05-05 20:57:31
【问题描述】：

在 react js 中，如果有人使用列表对象映射到列表如下：

const removeUser = (email)=>{
        alert(email)
    }

    const usersList = users.map((user) =>
        <li key={user._id}>
            {user.Name}
            { isAdmin && <FontAwesomeIcon icon={faTrashAlt}  onClick={removeuser(user.Email)}/>}
        </li>
    );

这里，挂载列表元素组件时会自动触发onClick事件里面的函数。它会自动提示带有电子邮件地址的警报。

【问题讨论】：

这个：reactjs.org/docs/handling-events.html

标签： javascript reactjs array.prototype.map

【解决方案1】：

你正在传递方法的调用，你应该传递一个方法的定义。

const usersList = users.map((user) => (
     <li key={user._id}>
        { user.Name }
       { isAdmin && <FontAwesomeIcon icon={faTrashAlt} onClick={() => removeuser(user.Email)} /> }
      </li>
 ));

【讨论】：

'{}` 在错误的位置。请更正。
对不起@RandyCasburn，我提交错了：->
当尝试将所有内容包装在一行中时会发生这种情况?
还有什么不正确的？ @RandyCasburn
这就是试图通过电话提供帮助的情况......

【解决方案2】：

在react - onClick 中应该得到一个函数来执行，而不是像你那样执行一个函数。

用这样的箭头键功能包装你的功能，它会起作用：

const removeUser = (email) => {
    alert(email)
}

const usersList = users.map((user) =>
    <li key={user._id}>
        {user.Name}
        {isAdmin && <FontAwesomeIcon icon={faTrashAlt}  onClick={() => removeuser(user.Email)}/>}
    </li>
);

【讨论】：