安装组件时自动触发 onClick 中的函数

Question

在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事件里面的函数是在挂载列表元素组件的时候自动触发的。它会自动提示带有电子邮件地址的警报。

Answer 1

在 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>
);

Answer 2

您正在传递方法的调用，您应该传递方法的定义。

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

安装组件时自动触发 onClick 中的函数

Automatically triggered a function in a onClick while mounting the component

javascript

reactjs

array.prototype.map