如何解决React中useRef转类组件为函数组件时Reward undefined报错

核心错误定位 #

你写的函数组件无法触发动效，是3个逻辑错误共同导致的：

• fakeRequest 函数参数命名冲突：你在函数定义时把rewardRef设为入参，导致Checkbox的onChange事件触发时，函数实际接收的是原生ChangeEvent事件对象，而非组件作用域内声明的ref实例，自然读不到rewardMe方法
• ref取值逻辑偏移：函数组件中通过useRef声明的ref，需要通过.current属性才能拿到绑定的组件实例，不能直接引用ref变量本身；且react-rewards的ref暴露的就是带rewardMe方法的实例，不需要额外嵌套读取.reward属性
• 空引用风险：useRef未设置初始值，组件未挂载完成时直接读取实例方法会触发空值报错

可直接运行的修复后代码 #

import { Checkbox } from "@chakra-ui/react";
import React from "react";
import Reward from "react-rewards";

const FPlayGround: React.FC = () => {
  // 初始化ref为null，避免初始空引用
  const rewardRef = React.useRef<Reward>(null);

  const config = {
    fakingRequest: false,
    angle: 90,
    decay: 0.91,
    spread: 100,
    startVelocity: 20,
    elementCount: 15,
    elementSize: 20,
    lifetime: 200,
    zIndex: 10,
    springAnimation: true,
    rewardPunish: "reward",
    type: "emoji"
  };

  // 移除和作用域重名的入参，直接引用组件内的ref变量
  const fakeRequest = () => {
    // 加可选链兜底，组件未挂载时不触发报错
    rewardRef.current?.rewardMe();
  };

  return (
    <>
      <div className="container">
        <Reward ref={rewardRef} type={"emoji"} config={config}>
          <Checkbox
            defaultChecked={false}
            onChange={fakeRequest}
          ></Checkbox>
        </Reward>
      </div>
    </>
  );
};
export default FPlayGround;

转换注意事项 #

• 类组件中挂载到实例上的ref属性，在函数组件中需要统一通过useRef存储，所有操作都要在ref的.current属性上完成
• 绑定事件的回调函数不要声明和上层作用域重名的入参，避免被事件注入的参数覆盖外部变量引用
• 调用第三方库暴露的实例方法时，优先加可选链做兜底，降低组件生命周期不同步导致的运行时错误

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