如何在React自定义Hook中用useMemo返回undefined值？

你的问题出在useMemo的回调函数没有正确返回对象。

看你注释掉的代码：

useMemo(() => { numberOfNft, maxNft, presaleStarted, presaleEnded }, [numberOfNft, maxNft, presaleStarted, presaleEnded])

这里箭头函数用大括号{}包裹内容时，JavaScript会把它当成代码块，而非对象字面量。代码块里没有写return语句，所以回调函数默认返回undefined，这就是useMemo无法正常工作的核心原因。

修正方案 #

有两种方式可以解决这个语法问题：

1. 显式添加return语句 #

return useMemo(() => { 
  return { numberOfNft, maxNft, presaleStarted, presaleEnded } 
}, [numberOfNft, maxNft, presaleStarted, presaleEnded])

2. 用小括号包裹对象（消除语法歧义） #

return useMemo(() => ({ 
  numberOfNft, maxNft, presaleStarted, presaleEnded 
}), [numberOfNft, maxNft, presaleStarted, presaleEnded])

额外优化建议 #

你的四个变量都来自data，可以直接把data作为useMemo的依赖项，减少依赖项数量的同时写法更简洁：

export function useCryptoDevs() {
    // (...)
    const { data } = useContractReads(/* ... */)

    return useMemo(() => ({
        numberOfNft: data?.[0],
        maxNft: data?.[1],
        presaleStarted: data?.[2],
        presaleEnded: data?.[3]
    }), [data])
}

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