更改三元运算符 *React* 中的两个状态答案

【问题标题】：Change two pieces of state inside a ternary operator *React*更改三元运算符 *React* 中的两个状态
【发布时间】：2021-04-21 07:48:45
【问题描述】：

是否适合在三元运算符中更改两个状态，还是最好使用 if-else 语句？

我尝试的一切似乎都遇到了问题。

我尝试过的示例如下所示。

x === y ? () => {setRating(10); setRank(1)} : console.log("Not found")

x === y ? setRating(10); setRank(1) : console.log("Not found")

这个和下面的 if-else 语句有什么区别？

if (x === y) {
    setRating(10);
    setRank(1);
} else {
    console.log("Not found")
}

【问题讨论】：

为了便于阅读，我建议您使用if 语句。三元运算符通常用于简单的if-else 操作。
它必须是单个表达式。您可以使用 逗号运算符，但将其编写为标准 if 语句可能更具可读性。
您为什么要这样做？那只会使您的代码不可读...使用 if 语句。
简单的规则是，如果你不使用条件运算符的结果，那么就不要使用它。
你应该只使用 if 语句，除非你真的想把它放在 1 行

标签： javascript ecmascript-6 conditional-operator use-state

【解决方案1】：

用逗号分隔表达式，并用括号L将它们包装起来

const fn = x => x ? (console.log('true'), console.log('again')) : console.log('false')

fn(true)

但是，出于可读性目的，您应该更喜欢 if/else 语句：

const fn = x => {
  if(x) {
    console.log('true');
    console.log('again');
  } else {
    console.log('false');
  }
}

fn(true)

【讨论】：

【解决方案2】：

试试类似的，

const setData = (index,average)=>{
 setRating(average);
 setRank(index) 
}

并将您的三元运算符更改为

place.name.toUpperCase() === doc.data().place ?setData(index,doc.data().average):console.log("Not found")

【讨论】：

【解决方案3】：

您可以使用 Ori Dori 的答案，但是另一种方法可能是将两个函数分开为另一个函数，如下所示：

place.name.toUpperCase() === doc.data().place ?
    onFound() : console.log("Not found");


function onFound() {
    setRating(doc.data().average);
    setRank(index) 
}

【讨论】：

【解决方案4】：

您可以将调用包装在自执行箭头函数中，但我不建议这样做，因为这不是一个好习惯。

创建调用这两个函数的第三个函数是推荐的方法。

place.name.toUpperCase() === doc.data().place ? (() => 
    setRating(doc.data().average);
    setRank(index))() 
    : console.log("Not found")

【讨论】：