TypeScript React Todo应用：为何无法给函数添加额外参数？

错误原因 #

你调用completedButton(e, item.id)时传入了2个参数，但函数定义仅声明了1个参数（event），TypeScript的强类型检查会拦截这种参数不匹配的情况，因此报错expected 1 argument, got 2。

解决方案 #

方法1：直接扩展函数参数并指定类型 #

先明确Todo数据类型（若未定义），再给处理函数添加第二个参数并指定类型：

// 根据实际数据结构定义Todo类型
interface Todo {
  id: number; // 若id为字符串则改为string
  name: string;
  completed?: boolean;
}

// 确保Context类型匹配，这里假设TodoContext是Todo[]类型
const [todos, setTodos] = useContext<Todo[] | undefined>(TodoContext);

// 修改completedButton的参数定义
const completedButton = (event: React.MouseEvent<HTMLButtonElement>, todoId: number) => {
  event.preventDefault();
  // 示例逻辑：切换对应todo的完成状态
  if (todos) {
    setTodos(todos.map(todo => 
      todo.id === todoId ? {...todo, completed: !todo.completed} : todo
    ));
  }
};

调用时保持原写法即可：

<button
  className="list-item__button list-item__button--completed"
  onClick={(e) => completedButton(e, item.id)}
>
  Completed
</button>

方法2：使用柯里化函数（更简洁） #

将处理函数改成柯里化形式，先接收todoId，再返回接收event的函数，调用时无需手动传递事件对象：

const completedButton = (todoId: number) => (event: React.MouseEvent<HTMLButtonElement>) => {
  event.preventDefault();
  if (todos) {
    setTodos(todos.map(todo => 
      todo.id === todoId ? {...todo, completed: !todo.completed} : todo
    ));
  }
};

调用时直接传入item.id：

<button
  className="list-item__button list-item__button--completed"
  onClick={completedButton(item.id)}
>
  Completed
</button>

扩展：统一处理编辑/删除函数 #

如果编辑、删除按钮也需要item.id，可用同样方式修改：

// 编辑按钮的柯里化函数
const editButton = (todoId: number) => (event: React.MouseEvent<HTMLButtonElement>) => {
  event.preventDefault();
  // 处理编辑逻辑，比如打开编辑弹窗、填充表单等
};

// 删除按钮的柯里化函数
const deleteButton = (todoId: number) => (event: React.MouseEvent<HTMLButtonElement>) => {
  event.preventDefault();
  if (todos) {
    setTodos(todos.filter(todo => todo.id !== todoId));
  }
};

调用示例：

<button
  className="list-item__button list-item__button--edit"
  onClick={editButton(item.id)}
>
  Edit
</button>
<button
  className="list-item__button list-item__button--delete"
  onClick={deleteButton(item.id)}
>
  Delete
</button>

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