使用React的useState钩子时为何返回undefined？

问题原因 #

你写的useState(() => {})里，() => {}被React当成了惰性初始化函数——React会自动调用这个函数，把它的返回值作为状态的初始值。而这个空函数没有return语句，默认返回undefined，所以你的callback状态初始值就是undefined。

解决方案 #

要让状态初始值为空函数，你需要让惰性初始化函数返回这个空函数，或者换一种方式避免React把目标函数当成初始化器。这里有两种可行写法：

写法一：嵌套函数返回空函数

直接在初始化器里返回你需要的空函数：

import { useState } from 'react';

function MyComponent() {
    // 外层函数是React调用的初始化器，返回我们要的空函数
    const [callback, setCallback] = useState(() => () => {});
    console.log(callback); // 现在会输出: () => {}
    return <div>My component</div>;
}

写法二：先定义空函数，再通过初始化器返回

如果需要复用空函数，可以先定义变量，再让初始化器返回它：

import { useState } from 'react';

function MyComponent() {
    const emptyCallback = () => {};
    // 初始化器函数返回我们预先定义的空函数
    const [callback, setCallback] = useState(() => emptyCallback);
    console.log(callback); // 输出: () => {}
    return <div>My component</div>;
}

关于useEffect的补充 #

如果你之前用useEffect还是得到undefined，大概率是因为状态初始化的问题没解决。修正初始化写法后，在useEffect里也能正常拿到空函数：

import { useState, useEffect } from 'react';

function MyComponent() {
    const [callback, setCallback] = useState(() => () => {});
    
    useEffect(() => {
        console.log(callback); // 输出空函数
    }, [callback]);
    
    return <div>My component</div>;
}

关键知识点 #

• useState的参数规则：如果传入非函数值，直接作为初始状态；如果传入函数，则作为惰性初始化函数，React会执行它并取返回值作为初始状态。
• 当你需要把函数本身作为状态值时，不能直接传这个函数（否则会被当成初始化器执行），必须通过外层的初始化函数返回它。

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