将 If/Else 转换为三元 React Typescript

Question

I have a project in React and Typescript and am creating a Like button and created an if/else statement as so:

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

The code works as expected but I am wondering if there is a more concise way to write it, I tried using a ternary statement:

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

I am unsure of why this doesn't produce the same result and am also getting the following Typescript error: An expression of type 'void' cannot be tested for truthiness

Answer 1

I think your original existing code is fine - using the conditional operator not only makes it a lot harder to read, but it also just isn't appropriate because the conditional operator is meant to be used when you want to conditionally produce an expression (but the resulting expression here isn't being used). if/else is more appropriate.

But there is an alternative that can make your code more concise. Because it looks like iconFill toggles between gray and red, how about making that state a boolean instead of a string? Then you can just invert the boolean:

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

The conditional operator is used above, but it's in a more appropriate context because the result is used as an expression (that is, to evaluate to 1 or -1 ) rather than as an inappropriate replacement for if/else.

Answer 2

Should you change your code? No, moving to ternary here is not an improvement, so I wouldn't.

Why doesn't your proposed code work? In your proposed code setCount(count - 1 ) && setFill('gray') , the setFill command will only execute if setCount returns truthy . In all likelihood, your setter methods return undefined, so the code after && will never execute. There is no point in evaluating B in A && B if A is false. The evaluation is short-circuited .

Also, minor comment, prefer === over == in JavaScript.

Answer 3

Another approach can be:

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

Here the limitation is checking for condition twice.

Answer 4

感谢大家的回应，现在对我来说很有意义，为什么三元不适合这种情况，保持我的原创！