TypeScript React类型错误：setTasks的void类型无法匹配目标类型

核心错误点 #

• 错误调用setTasks函数：App组件中<Form setTasks={setTasks(tasks)}/>是直接执行setTasks(tasks)，这会立即更新状态并返回void，导致传递给Form的是void类型，而非预期的状态更新函数。
• Form组件props定义错误：React组件的参数是props对象，你直接把setTasks作为单个参数接收，TypeScript会认为组件接收的是Dispatch类型值，而非包含setTasks属性的对象。
• 新任务对象格式不符合接口：setTasks回调中创建的{oldstudies}不符合IStudy接口定义，缺少study字段。

修正步骤 #

1. 修正App组件的传参方式 #

直接传递setTasks函数本身，不要调用它：

function App() {
  // IStudy[]已包含空数组场景，无需额外声明| []
  const [tasks, setTasks] = useState<IStudy[]>([]);

  return (
    <div className={style.AppStyle}>
      <Form setTasks={setTasks} />
      <List tasks={tasks} />
      <Timer />
    </div>
  );
}

2. 修正Form组件的props类型与逻辑 #

先定义Form的props接口，解构接收属性，同时修正任务添加逻辑：

// 定义Form组件的props接口
interface FormProps {
  setTasks: React.Dispatch<React.SetStateAction<IStudy[]>>;
}

const Form = ({ setTasks }: FormProps) => {
  const [study, setStudy] = useState('');

  function addTask(event: React.FormEvent) {
    event.preventDefault();
    // 创建符合IStudy接口的新任务对象
    setTasks(prevTasks => [...prevTasks, { study: study }]);
    // 清空输入框
    setStudy('');
  }

  return (
    <form className={style.newTask} onSubmit={addTask}>
      <div className={style.inputContainer}>
        <label htmlFor="task">
          Add your new study task
        </label>
        <input 
          type="text"
          name="task"
          id="task"
          value={study}
          onChange={e => setStudy(e.target.value)}
          placeholder="What do you want to study?"
          required
        />
      </div>
      <button type="submit">Add Task</button>
    </form>
  );
};

3. 保持IStudy接口的正确性 #

你的IStudy接口定义无需修改：

export interface IStudy {
  study: string;
}

验证效果 #

修正后，传递给Form的setTasks是正确的状态更新函数类型，添加任务时的对象也符合接口规范，TypeScript类型错误会彻底消除。

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