React+TypeScript开发Todo应用新增任务出现undefined类型报错如何解决

问题根源 #

你声明newTask状态时没有传入初始值，TypeScript会自动推导该状态的类型为联合类型 Todo | undefined，而你的todos数组是明确的Todo[]类型，往其中推入可能为undefined的值自然会触发类型不兼容报错。将泛型改为any相当于主动关闭了类型校验，属于规避问题而非解决问题，完全丢失了TypeScript的类型安全优势，非常不推荐。

解决方案 #

下面是两种符合TypeScript规范的修复方案，你可以根据需求选择：

方案1：保留可选类型，提交前做非空校验 #

这种方案更贴合你现有写法的逻辑，还能顺便做提交合法性校验：

const handleSubmitNewTodo = () => {
  // 只有newTask存在且任务文本不为空时才执行提交
  if (newTask && newTask.text.trim()) {
    setTodos([...todos, newTask])
    // 提交完成后重置状态，优化使用体验
    setNewTask(undefined)
  }
}

同时记得给输入框补充value绑定，把它改成完整的受控组件，否则提交后无法清空输入内容：

<input 
  placeholder="Add todo" 
  type="text" 
  value={newTask?.text || ''} 
  onChange={handleChange} 
/>

方案2：给状态设置初始值，消除undefined类型 #

直接给newTask设置符合Todo接口的初始值，从根源上避免类型为undefined的情况：

const [newTask, setNewTask] = useState<Todo>({
  id: 0,
  text: '',
  completed: false
})

此时提交逻辑只需校验文本合法性即可：

const handleSubmitNewTodo = () => {
  if (newTask.text.trim()) {
    setTodos([...todos, {...newTask, id: todos.length}])
    // 提交后重置输入内容
    setNewTask(prev => ({...prev, text: ''}))
  }
}

其他优化建议 #

• 你当前的完成状态切换逻辑存在bug：用id作为数组下标取元素，当删除过任务后id和数组索引会不匹配，导致修改错任务。建议改为以下写法，符合React状态不可变的最佳实践：

  const handleClickOnComplete = (id: number, completed: boolean) => {
    const newTodos = todos.map(todo => 
      todo.id === id ? {...todo, completed: !completed} : todo
    )
    setTodos(newTodos)
  }
  

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