react钩中不起作用的三元运算符

Question

这是我在React中的代码。

const [click, setClick] = useState(false);
  const [like, setLike] = useState(dataObj.likedCount); // like === 4
  const onClick = () => {
    console.log(like);
    console.log(click);
    return setClick(!click) ? setLike(like - 1) : setLike(like + 1);
  };

return (
 <Like onClick={onClick}>{like}</Like>
)

这是控制台页面。

我的麻烦是，“喜欢的数字”只是在增加，而不是在减少。即使布尔值在变化，从true到false。我在代码上找不到任何错误。...：（（

Answer 1

一些注意点：

• 对于条件运算符，使用状态而不是setClick(!click)
• 不返回onClick()，使用道具值（已选中）以使其受到完全控制

const [click, setClick] = useState(false);
  const [like, setLike] = useState(dataObj.likedCount); // like === 4
  const onClick = () => {
    click ? setLike(like - 1) : setLike(like + 1);
    setClick(!click);
  };

return (
 <Like onClick={onClick} value={click}>{like}</Like>
)

Answer 2

您正在使用setClick的返回值。 useState中的setter函数没有记录的返回值。实验表明，它总是返回useState。因此，您不能依赖undefined的返回值。

如果您的目标是使用setClick的值，请直接这样做：

!click

或

setClick(!click);
if (!click) {
    setLike(like - 1);
} else {
    setLike(like + 1);
}