React+TypeScript中使用Setter函数报错问题求助

以下是代码中存在的核心问题及对应修复步骤：

核心问题梳理 #

• Todo接口缺失必要字段：空接口无法约束待办项结构，导致类型检查失效。
• 组件Props类型错误：Form组件未接收任何props，却用Todo作为参数类型，完全冗余。
• Context类型不匹配：useContext取出的setTodos需要处理数组更新，但当前代码直接传入单个Todo对象，与数组类型冲突。
• UI绑定逻辑错误：把输入框的onChange和value绑定到了提交按钮上，导致输入内容无法同步到状态。
• 状态更新逻辑错误：setTodos直接替换成单个Todo对象，而非在原有数组基础上添加新项。

分步修复 #

1. 完善Todo接口 #

给Todo接口定义必要的结构字段：

interface Todo {
  id: number;
  label: string;
}

2. 修正组件Props类型 #

Form组件未接收props，直接用空对象作为参数类型即可：

function Form() {
  // 内部逻辑
}

3. 确保TodoContext类型正确 #

如果你的TodoContext还未正确定义类型，先修正Context文件：

// TodoContext.tsx
import { createContext, useState, ReactNode } from 'react';
import { Todo } from './path-to-your-interface';

// 定义Context的类型：[待办数组, 更新数组的Dispatch函数]
type TodoContextType = [Todo[], React.Dispatch<React.SetStateAction<Todo[]>>];

export const TodoContext = createContext<TodoContextType>([[], () => {}]);

export const TodoProvider = ({ children }: { children: ReactNode }) => {
  const [todos, setTodos] = useState<Todo[]>([]);
  return (
    <TodoContext.Provider value={[todos, setTodos]}>
      {children}
    </TodoContext.Provider>
  );
};

4. 修正UI绑定逻辑 #

将输入框的value和onChange绑定到文本输入框，提交按钮仅负责触发提交：

<input 
  type="text" 
  placeholder="Todo" 
  value={todo} 
  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTodo(e.target.value)} 
/>
<input type="submit" value="Add todo" />

5. 修正状态更新逻辑 #

添加新待办项时，基于原有数组创建新数组，避免直接替换：

const submitHandler = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  // 过滤空白输入，避免添加空待办
  if (!todo.trim()) return;
  
  // 使用函数式更新，确保拿到最新的todos状态
  setTodos(prevTodos => [...prevTodos, { id: prevTodos.length + 1, label: todo.trim() }]);
  setTodo("");
};

6. 优化todo状态初始值 #

把todo初始值设为空字符串，去除不必要的undefined类型：

const [todo, setTodo] = useState<string>("");

完整修正后的代码 #

import React, { useState, useContext } from "react";

import { FormWrapper } from "./Style";
import { TodoContext } from "../../context/TodoContext";

interface Todo {
  id: number;
  label: string;
}

// 从Context导入类型，或直接使用typeof TodoContext['defaultValue']
type TodoContextType = [Todo[], React.Dispatch<React.SetStateAction<Todo[]>>];

function Form() {
  const [todo, setTodo] = useState<string>("");
  const [todos, setTodos] = useContext<TodoContextType>(TodoContext);

  const submitHandler = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (!todo.trim()) return;

    setTodos(prev => [...prev, { id: prev.length + 1, label: todo.trim() }]);
    setTodo("");
  };

  return (
    <div>
      <FormWrapper>
        <form onSubmit={submitHandler}>
          <input
            type="text"
            placeholder="Todo"
            value={todo}
            onChange={(e) => setTodo(e.target.value)}
          />
          <input type="submit" value="Add todo" />
        </form>
      </FormWrapper>
    </div>
  );
}

export default Form;

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