React+TypeScript报错：找不到Dispatch和SetStateAction类型如何解决？

问题原因 #

Dispatch和SetStateAction是React提供的TypeScript类型，你未从React模块中导入它们，导致TypeScript无法识别这两个类型。此外你的子组件还存在props参数与类型定义不匹配的问题，需要一并修正。

修复步骤 #

1. 导入缺失的类型 #

在JobMenubar.tsx顶部从React导入Dispatch和SetStateAction：

import { Dispatch, SetStateAction } from 'react';

2. 统一props类型与解构参数 #

你的Props类型定义的是jobs和setJobs，但子组件解构的是filteredJobs和setFilteredJobs，两者不匹配，需要统一名称；同时把never[]改成和父组件一致的string[]：

// JobMenubar.tsx
import { Dispatch, SetStateAction } from 'react';

type Props = {
  jobs: string[]
  setJobs: Dispatch<SetStateAction<string[]>>
}

export default function JobMenubar({ jobs, setJobs } : Props) {
  return (
    // ... 组件内容
  )
}

3. 优化父组件初始状态类型（可选） #

父组件中useState([])默认推断为never[]，显式指定类型能让代码类型更清晰：

// page.tsx
import { useState } from 'react';

export default function Page() {
  const [jobs, setJobs] = useState<string[]>([]);

  return (
    <JobMenubar jobs={jobs} setJobs={setJobs} />
  )
}

以上操作即可解决两个类型未找到的错误，同时修正props不匹配的问题。

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