使用带花括号的箭头函数和setState的回调错误的三元运算符？

Question

我设置了一个箭头函数，其中大括号中的三元运算符作为setState的回调，但在运行代码时收到错误消息。

1. 如果我删除花括号，错误就会消失。
2. 如果我不使用三元运算符，则错误消失。
3. 如果我在操作员面前写“返回”，则错误消失。

代码可以双向运行（看起来它运行一些救援方法），但我不明白为什么我开始收到错误消息。我正在运行的函数不需要返回任何东西，只需要运行一些语句。但似乎React不喜欢回调中的三元运算符？或者如果他们被退回，他们还可以吗？有谁知道为什么？

    this.setState({someObject},() => { x ? console.log("yo") : null;}); 

警告信息

 Expected an assignment or function call and instead saw an expression  no-unused-expressions

回调函数中的三元运算符有问题吗？

Answer 1

它是一个ESLint警告，它正在发生，因为你没有使用你在其他任何地方返回的值，并且对程序的状态没有影响。

  

未使用的表达式是那些计算为值的表达式   永远不会使用

您可以在此处详细了解该规则： ESLint

Answer 2

问题是你没有返回三元表达式的结果（或用它做任何事情），并且当你需要得到的值时，应该使用三元运算符。 。出于类似的原因，以下行将产生相同的警告：

function foo() {
  'bar';
 }

和

function foo2() {
  baz === 3;
 }

正在丢弃已评估表达式的值，就像在您的情况下一样。如果您不需要使用表达式的结果，请不要使用三元运算符;请改用if和else：

this.setState({someObject},() => {
  if (x) console.log("yo");
}); 

Answer 3

答案与箭头功能的工作方式有关：

当编写没有花括号的箭头函数时，箭头右边的内容将被视为表达式，而JS知道会返回该表达式的结果。

但是，当使用花括号时，箭头右侧是一个语句块，该语句块不会返回任何内容，除非有指示，因此必须隐式给出return语句，以便函数可以返回任何内容。