将If/Else转换为三值React类型记录

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');

我不知道为什么这不会产生相同的结果，并得到以下类型记录错误：An expression of type 'void' cannot be tested for truthiness

Answer 1

我认为您原来的现有代码很好--使用条件运算符不仅使您很难阅读，而且也不合适，因为条件运算符是在您想要有条件地生成表达式时使用的(但是这里的表达式没有被使用)。if/else更合适。

但是有一种选择可以使您的代码更加简洁。因为看起来像iconFill在灰色和红色之间切换，不如把状态变成布尔状态而不是字符串呢？然后，您只需倒转布尔值：

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')中，只有当setCount返回特鲁西时，setFill命令才会执行。很可能，setter方法返回未定义的，因此&&后的代码永远不会执行。如果A是假的，在B中计算A && B是没有意义的。评价方法为短路。

此外，次要的评论，首选 ===超过==在JavaScript。

Answer 3

另一种办法可以是：

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

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