如何像切换按钮一样反应功能组件

Question

我希望在按下Like按钮后更改图标组件，但这并不符合我的要求。有可能得到一些帮助吗？

"心脏；以及"；HeartOutline"；组件调用图标。

const [heart, setHeartRed] = useState({
state: false,
number: '0',
});
const isLikeyOnHandler = () => {
heart.state
? setHeartRed({ state: false, number: '0' })
: setHeartRed({ state: true, number: '1' });
};
return(
<HeartButton
text={heart.number}
icon={heart.state ? <Heart /> : <HeartOutline />}
onClick={() => isLikeyOnHandler()}
/>
)

Answer 1

const [heart, setHeartRed] = useState({
state: false,
number: '0',
});
const isLikeyOnHandler = () => {
setHeartRed((prevState)=>({state:!prevState.state,number:+!+prevState.number+""})
};
return(
<HeartButton
text={heart.number}
icon={heart.state ? <Heart /> : <HeartOutline />}
onClick={isLikeyOnHandler}
/>
)