将经useMemo处理的节流函数传给组件onPress时触发报错问题

正常运行的代码 #

组件代码 #

<TouchableOpacity
  style={...}
  onPress={() => func(x)}
>
</TouchableOpacity>

函数定义 #

const func = (x) => { console.log("help please") }

修改后出错的代码 #

尝试用useMemo对func进行记忆化处理：

const func = useMemo(()=>throttle(500,true, (x)=>{console.log("help please")})

报错信息 #

TypeError: callback.apply is not a function. (In 'callback.apply(self, arguments_)', 'callback.apply' is undefined)

注：throttle从throttle-debounce库导入：

import { throttle } from "throttle-debounce";

问题根源有两个：

• 代码语法错误：useMemo的回调函数缺少闭合括号，导致返回的不是有效的节流函数
• 工具函数误用：记忆化函数优先用useCallback更合适，useMemo主要用于缓存计算值

正确写法1：修复useMemo语法 #

const func = useMemo(() => {
  return throttle(500, true, (x) => {
    console.log("help please")
  })
}, []) // 空依赖数组确保只创建一次节流函数

正确写法2：使用useCallback（更推荐） #

const func = useCallback(
  throttle(500, true, (x) => {
    console.log("help please")
  }),
  []
)

说明：throttle-debounce的throttle调用后会返回一个节流函数，只需在组件初始化时创建一次，因此依赖数组设为空即可。

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