TypeScript中使用onClick事件时的状态追踪问题

核心错误原因 #

你遇到的Type 'void' is not assignable to type 'MouseEventHandler<HTMLButtonElement> | undefined'错误，是因为你直接执行了handleClick函数，而不是把它作为点击事件的回调传递：

// 错误写法：立即执行handleClick，返回void，不符合onClick的函数类型要求
onClick={handleClick(selectedState, label)}

onClick需要接收一个(event: MouseEvent<HTMLButtonElement>) => void类型的函数，而不是函数执行后的返回值（这里是void）。

分步修正方案 #

1. 修复onClick的回调传递方式

把直接调用改成传递一个箭头函数，让它在按钮点击时才执行handleClick：

// 正确写法：箭头函数作为回调，点击时才触发handleClick
onClick={() => handleClick(selectedState, label)}

2. 解决状态更新日志不准确的问题

React的setState是异步批量更新的，所以在setSelectedState后直接打印selectedState，拿到的还是更新前的旧值。可以通过以下两种方式解决：

方法一：使用useEffect监听状态变化

通过useEffect钩子监听selectedState的变化，当状态真正更新后打印新值：

useEffect(() => {
  console.log("Updated State:", selectedState);
}, [selectedState]); // 依赖项为selectedState，状态变化时触发

方法二：使用函数式更新确保状态准确性

如果需要基于当前状态修改新状态，推荐使用函数式更新，避免闭包导致的旧状态问题：

setSelectedState(prevState => !prevState);

完整修正代码 #

import { useState, useEffect } from "react";

interface Props {
  label: string;
  children: string;
  type: string;
}

const ButtonClass = ({ label, children, type }: Props) => {
  const [selectedState, setSelectedState] = useState(false);

  // 监听状态变化，打印更新后的状态
  useEffect(() => {
    console.log("Updated State:", selectedState);
  }, [selectedState]);

  const handleClick = () => {
    console.log(label, "clicked");
    console.log("Old State Before Update:", selectedState);
    // 函数式更新，基于最新前序状态修改
    setSelectedState(prevState => !prevState);
  };

  return (
    <button
      type="button"
      className={type}
      onClick={handleClick}
    >
      {children}
    </button>
  );
};

export default ButtonClass;

关键知识点说明 #

• 事件回调的正确传递：React事件属性需要接收一个函数，而非函数执行结果，直接调用函数会导致组件渲染时就执行该函数，而非事件触发时。
• setState的异步性：React会批量处理状态更新以优化性能，所以状态不会在setState调用后立即改变，必须通过useEffect或组件重新渲染后的代码获取新状态。
• 函数式更新的优势：当新状态依赖于旧状态时，使用函数式更新可以确保获取到最新的前序状态，避免闭包陷阱。

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