setState回调中带大括号箭头函数与三元运算符使用报错问题

这问题我之前踩过坑，其实核心是ESLint的no-unused-expressions规则在“挑刺”，咱们把问题拆解开看：

1. 箭头函数的两种写法差异 #

箭头函数有两种定义方式：

• 隐式返回写法（不带大括号）：() => 表达式，这里表达式的结果会自动作为函数的返回值，哪怕调用方不需要这个返回值，ESLint也会认为这个表达式是“被使用”的（作为返回值）。
• 显式函数体写法（带大括号）：() => { 语句/表达式 }，这里面的内容是函数的执行体，如果你写了一个独立的表达式（没有赋值、没有作为参数传递、没有return），ESLint就会认为这是“未被使用的表达式”，触发警告。

2. 你的三元表达式为啥触发警告？ #

你写的代码：

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

这里的x ? console.log("yo") : null是一个三元表达式（它有返回值），但你把它直接放在显式函数体里，既没把它的返回值赋值给变量，也没return出去，更没作为参数传给其他函数——对于ESLint来说，这就像你平白无故写了一句1 + 2;一样，属于“无意义的代码”，它默认你可能是笔误（比如本来想写if(x) console.log("yo");），所以抛出警告。

3. 为啥那几种修改方式能解决问题？ #

• 移除大括号：变成() => x ? console.log("yo") : null，此时三元表达式是隐式返回的内容，ESLint认为它被用作函数返回值，不属于“未使用”，所以不报错。
• 改成if语句：() => { if(x) console.log("yo"); }，if是语句不是表达式，不存在“未使用”的问题，自然符合规则。
• 添加return：() => { return x ? console.log("yo") : null; }，此时表达式的结果被return出去，属于被使用，ESLint就不会警告了。

总结 #

哪怕你的回调函数不需要返回值，只要在显式函数体里写了独立的表达式（像三元、算术表达式这类有返回值但没被利用的），就会触发no-unused-expressions警告。如果就是想用三元，最合规的写法要么改成隐式返回，要么加return，或者直接换成if语句更清晰。

内容的提问来源于stack exchange，提问作者Bryan