ReactJS:函数中有太多的重新渲染

Question

我想做一个小函数，这使得一个可爱的按钮。我的函数应该工作，但我得到的错误是太多的重新渲染(即使强硬的setState只被称为onClick)下列代码:

function ClickMeToLike(){
const [isLiked, setIsLiked] = useState(false);
return (
<Col><p>
{
isLiked ?
<Icon.Heart onClick={setIsLiked(true)}/> :
<Icon.HeartFill onClick={setIsLiked(false)}/>
}
</p></Col>
)
}

Answer 1

你需要在你的onClick

中使用箭头函数试试这个

onClick = {() => setIsLiked(true)}

最佳实践是使用我上面的答案，并定义一个单独的函数来处理您的点击

Answer 2

是的，你不应该在返回中处理点击。您需要定义一个单独的函数来处理单击。

function ClickMeToLike(){
const [isLiked, setIsLiked] = React.useState(false);
onClick = () => setIsLiked(!isLiked);

return (
<div>
<button onClick={onClick}>Button</button>
{isLiked?"clicked":"not clicked"}
</div>
)
}