TypeScript React函数组件ESLint返回类型缺失警告的修复方案

问题描述 #

我在App.tsx中编写了如下代码：

const App: FC = () => { 
  const addItem = () => { 
    useState([...items, {id:1,name:'something'}]);
  } 
  return <div>hello</div>; 
}

ESLint提示警告：Missing return type on function @typescript-eslint/explicit-function-return-type，我不想关闭explicit-function-return-type规则，而且addItem无需返回任何值，请问该如何修复这段代码？

解决方案 #

你的代码有两个需要修正的地方：React Hook的使用错误和函数返回类型缺失，下面是完整的修复方案：

1. 修正React Hook的使用方式

首先，你不能在普通函数（比如addItem）内部直接调用useState——React要求Hook只能在组件的顶层作用域或者自定义Hook中调用。正确的做法是先在组件顶层声明状态变量和对应的更新函数。

2. 为addItem指定返回类型void

因为addItem不需要返回任何值，我们可以明确给它标注返回类型为void，这样就能满足explicit-function-return-type规则的要求，无需关闭该规则。

完整修复后的代码

import { FC, useState } from 'react';

// 定义Item类型，规范数据结构（可选但推荐）
interface Item {
  id: number;
  name: string;
}

const App: FC = () => { 
  // 在组件顶层声明状态和更新函数
  const [items, setItems] = useState<Item[]>([]);

  // 明确指定addItem的返回类型为void
  const addItem = (): void => { 
    // 使用setItems更新状态，推荐用函数式更新确保拿到最新的状态值
    setItems(prevItems => [...prevItems, { id: 1, name: 'something' }]);
  } 

  return <div>hello</div>; 
}

补充说明 #

• 使用函数式更新（setItems(prevItems => ...)）是因为当新状态依赖于旧状态时，这种方式能确保你拿到的是最新的状态值，避免潜在的状态更新问题。
• 定义Item接口可以让TypeScript帮你做类型检查，避免不小心传入不符合结构的数据，让代码更健壮。

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