为什么要创建一个新的函数，而不是直接使用传递的道具

Question

我正在学习React，最近遇到了一个无法跟踪的错误
Warning: Cannot update a component (`App`) while rendering a different component (`UserDisplayItem`). To locate the bad setState() call inside `UserDisplayItem

然后我发现我直接调用了div中的一个传递的prop函数

import React from "react";
import Card from "../Card/Card";
const UserDisplayItem = (props) => {
return (
<Card>
<div onClick={ props.onDeleteUser(props.id)}>
<div>{props.user.userName}</div>
<div>{props.user.age}</div>
</div>
</Card>
);
};
export default UserDisplayItem;

当我添加了一个函数来处理它时，它就工作了：

import React from "react";
import Card from "../Card/Card";
const UserDisplayItem = (props) => {
// !!!!!!!! VERY IMPORTANT. ALWAYS MAKE YOUR OWN FUNCTION
const deleteHandler = () => {
props.onDeleteUser(props.id);
};
return (
<Card>
<div onClick={deleteHandler}>
<div>{props.user.userName}</div>
<div>{props.user.age}</div>
</div>
</Card>
);
};
export default UserDisplayItem;

所以我很高兴它能起作用，但我想了解为什么另一种方法不起作用。任何帮助都将不胜感激，谢谢。

Answer 1

问题本身与函数引用无关，而是在第一个代码示例中，当组件呈现时(而不是单击div元素时(立即调用函数。

onClick={props.onDeleteUser(props.id)}

您应该使用匿名回调：

onClick={() => props.onDeleteUser(props.id)}

或者像您那样声明一个本地回调函数，并将引用传递给它：

const deleteHandler = () => {
props.onDeleteUser(props.id);
};
...
onClick={deleteHandler}

一个改进可以是在将id传递到props之前将其包含在回调中。

示例：

<UserDisplayItem onDeleteUser={() => deleteUser(id)} user={....} />

const UserDisplayItem = ({ onDeleteUser, user }) => {
return (
<Card>
<div onClick={onDeleteUser}>
<div>{user.userName}</div>
<div>{user.age}</div>
</div>
</Card>
);
};