React+Vite+pnpm Todo项目：ESLint提示onSubmit缺少props校验求助

这个错误是因为ESLint的react/prop-types规则要求组件接收的props必须做类型校验，你的TaskForm组件使用了props.onSubmit但没有给这个prop定义校验规则，所以触发了报错。

解决方法：添加PropTypes校验 #

1. 先安装prop-types依赖（如果还没装的话）：

pnpm add prop-types

2. 修改组件代码，导入PropTypes并添加props校验：

import { useState } from 'react'
import '../stylesheets/TaskForm.css'
import uuid from 'react-uuid'
import PropTypes from 'prop-types' // 导入PropTypes

function TaskForm(props) {
  const [input, setInput] = useState('')

  const handleChanging = e => {
    setInput(e.target.value)
  }

  const handleSending = e => {
    e.preventDefault()
    
    const newTask = {
      id: uuid(),
      text: input,
      done: false
    }

    props.onSubmit(newTask)
  }

  return (
    <form
      className='task-form'
      onSubmit={handleSending}>
      <input
        className='task-input'
        type='text'
        placeholder='Make a new to-do ...'
        name='text'
        onChange={handleChanging}
      />
      <button className='task-button'>
        Add task
      </button>
    </form>
  )
}

// 添加props校验规则
TaskForm.propTypes = {
  onSubmit: PropTypes.func.isRequired // 声明onSubmit是必填的函数类型
}

export default TaskForm

其他可选方案（不推荐） #

• 如果不想用PropTypes，也可以在ESLint配置里关闭react/prop-types规则，但这样会失去props类型校验的保障，不利于代码维护。
• 如果你用的是TypeScript，可以通过定义接口来约束props类型，替代PropTypes。

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