React类组件中三元运算符结合setState报错求助

错误信息翻译 #

第11行第11列：预期是赋值或函数调用，却看到一个表达式 no-unused-expressions

问题根源 #

你的代码存在三个核心问题：

1. 无用表达式触发ESLint报错：三元运算符的else分支写了false，这是一个没有任何实际作用的表达式，违反了no-unused-expressions规则。
2. 直接修改state+push返回值错误：this.state.sport.push(element)会直接修改原state数组（违反React状态不可变原则），而且push返回的是数组的新长度，这会导致sport被设置成数字而非数组。
3. forEach内多次调用setState：循环里每次判断都调用setState，会引发不必要的重复渲染，且异步更新可能导致状态混乱。

修正后的代码（符合三元运算符要求） #

handleChange = (e) => {
  const selectedValue = e.target.value;
  // 用includes判断是否匹配，三元运算符处理更新
  this.state.sports.includes(selectedValue)
    ? this.setState(prevState => ({ 
        sport: [...prevState.sport, selectedValue] 
      }))
    : void 0; // 用void 0替代无意义的false，避免ESLint报错
};

关键说明 #

• 用includes替代forEach：直接判断目标值是否在sports数组中，避免循环内多次执行逻辑。
• 函数式更新state：setState(prevState => ...)确保拿到最新的状态值，避免异步更新导致的状态不一致。
• 不可变更新数组：用扩展运算符[...prevState.sport, selectedValue]创建新数组，不修改原state，符合React状态管理规范。
• 合法的else分支：用void 0或null替代false，既满足三元运算符的语法要求，又不会产生无用表达式。

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