React+TypeScript子组件函数间传参变量为undefined问题排查

问题根源 #

你的filterItem函数定义时使用了解构语法({ myEnum }: myProps)，这表示它期望接收一个符合myProps接口的对象作为参数。但你在onClick回调里调用时，直接传入了myEnum（即字符串'up'），函数内部尝试从传入的字符串中解构myEnum属性，自然无法获取到有效值，所以打印结果为undefined。

解决办法 #

有两种可行的修正方式：

方式一：修改函数参数为单个值

调整filterItem的参数定义，直接接收myEnum的值，无需解构：

const Checkbox = ({ myEnum, myName }: myProps) => {
  // 直接接收myEnum值，类型复用myProps中的定义
  function filterItem(myEnum: myProps['myEnum']) {
    console.log(myEnum); // 现在会正常打印'up'
  }

  return (
    <div>
      <div
        className="input-feild-1"
        onClick={() => {
          filterItem(myEnum); // 直接传入值即可
        }}
      ></div>
      <div>{myName}</div> {/* 注意：原代码中的statusName应该是myName，否则会报错 */}
    </div>
  );
};

方式二：保持函数参数结构，调用时传入对象

如果需要保留函数的参数解构形式，调用时要传入包含myEnum属性的对象：

const Checkbox = ({ myEnum, myName }: myProps) => {
  function filterItem({ myEnum }: myProps) {
    console.log(myEnum); // 正常打印'up'
  }

  return (
    <div>
      <div
        className="input-feild-1"
        onClick={() => {
          // 传入符合myProps结构的对象
          filterItem({ myEnum, myName });
          // 或者只传需要的属性：filterItem({ myEnum });
        }}
      ></div>
      <div>{myName}</div> {/* 修正statusName为myName */}
    </div>
  );
};

额外提示 #

原代码中模板里的{statusName}是未定义的变量，建议改成{myName}，避免运行时报错。

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