Question

我在React和Typescript中有一个项目，正在创建一个Like按钮，并这样创建了if / else语句：

  const [count, setCount] = useState(0);
  const [iconFill, setFill] = useState('gray');

  const favoriteCount = () => {
    if(iconFill == 'red') {
      setCount(count - 1 );
      setFill('gray');
    } 
    else {
      setCount(count + 1);
      setFill('red');
    }
  }

代码按预期工作，但是我想知道是否有更简洁的编写方法，我尝试使用三元语句：

iconFill == 'red' ? setCount(count - 1 ) && setFill('gray') : setCount(count + 1) && setFill('red');

我不确定为什么不会产生相同的结果，并且还会收到以下Typescript错误： An expression of type 'void' cannot be tested for truthiness

Answer 1

我认为您现有的原始代码很好-使用条件运算符不仅使它难以阅读，而且不适合，因为该条件运算符是要使用的当您想有条件地生成 expression 时（但此处未使用结果表达式）。 if/else更合适。

但是有一种替代方法可以使您的代码更简洁。因为看起来iconFill会在灰色和红色之间切换，如何将该状态设置为 boolean 而不是字符串？然后，您可以反转布尔值：

const [fillGray, setFillGray] = useState(true);
const favoriteCount = () => {
    setCount(count + (fillGray ? 1 : -1));
    setFillGray(!fillGray);
}

上面使用了条件运算符，但是它处于更合适的上下文中，因为结果使用作为表达式（即，求值为1或-1 ），而不是不适当地替换if / else。

Answer 2

您应该更改代码吗？不，在这里改用三元数没有改善，所以我不会。

为什么您建议的代码不起作用？在您建议的代码setCount(count - 1 ) && setFill('gray')中，setFill命令仅在setCount返回truthy时执行。您的setter方法很可能返回未定义的值，因此&&之后的代码将永远不会执行。如果A为假，则没有必要评估B中的A && B。评估为short-circuited。

此外，在JavaScript中，prefer ===比==小。

Answer 3

另一种方法可以是：

    setCount(iconFill === "red" ? count - 1 : count + 1);
    setFill(iconFill === "red" ? "gray" : "red");

这里限制是要检查条件两次。

Answer 4

感谢大家的回应，现在对我来说很有意义，为什么三元模式不适合这种情况，请保留我的原始内容！

将If / Else转换为三元反应打字稿

4 个答案: