ESLint 观察到一个赋值或函数调用，而是在 void 函数上看到了一个表达式

Question

问题描述：

我已经开始使用 typescript and eslint 进行一个项目。问题是，eslint 给了我一个意外的错误，似乎是一个正确声明的函数

---

代码：

import React, { useState } from 'react';

type Props = {
  options: Array<string>
};

const Switch: React.FC<Props> = (props: Props) => {
  const [choice, setChoice] = useState<number>(0);

  // eslint gives error @ following function
  const handleSwitchChange = ():void => {
    choice + 1 >= options.length ? setChoice(0) : setChoice(choice + 1)
  };

  return (
    <div>{options[choice]}</div>
    <button onClick={handleSwitchChange}>Change choice</button>
  );
};

---

更多详情：

现在这按预期工作了，但尽管事实上我传递给的函数是声明类型 void eslint 给我以下错误：

Expected an assignment or function call and instead saw an expression.

现在我不想只禁用该规则，但我没有发现代码有任何内在错误。有什么方法可以正确编写函数，这样 es-lint 就不会抱怨了吗？

---

ESLint 错误 （额外信息）

引发错误的特定 eslint 模块

 {
    "resource": "<PATH CENSORED>/src/components/forms/Switch.tsx",
    "owner": "eslint",
    "code": "@typescript-eslint/no-unused-expressions",
    "severity": 8,
    "message": "Expected an assignment or function call and instead saw an expression.",
    "source": "eslint",
    "startLineNumber": 12,
    "startColumn": 5,
    "endLineNumber": 12,
    "endColumn": 85
}

Answer 1

当你有一个带花括号的箭头函数时，它的主体必须至少包含一个 语句 （如错误消息所暗示的那样，一个赋值或函数调用，或者一个 if 或 return 声明或类似的东西):

const handleSwitchChange = {
  // Statements must go here
};

您实际上已经给出了一个 表达式，它（除了类型检查）可以出现在赋值或函数参数的右侧：

// Syntactically valid, not necessarily meaningful
const hypothetical = choice + 1 >= options.length ? setChoice(0) : setChoice(choice + 1);
someFunction(choice + 1 >= options.length ? setChoice(0) : setChoice(choice + 1));

你有几个选择。最简单的方法是通过删除大括号

将箭头函数更改为采用表达式的形式

const handleSwitchChange = (): void =>
  choice + 1 >= options.length ? setChoice(0) : setChoice(choice + 1);

有多种方法可以将其重构为更像一条语句，例如用 if 语句替换三元运算符，或者将函数移至顶层。

// Equally valid with or without curly braces
// (Curly braces explicitly ignore the return value)
const handleSwitchChange = (): void => {
  setChoice(choice + 1 >= options.length ? 0 : choice + 1);
};