为什么在 React 中尝试使用 useState 挂钩时出现“未定义”？答案

【问题标题】：Why am I getting 'undefined' when trying to use the useState hook in React?为什么在 React 中尝试使用 useState 挂钩时出现“未定义”？
【发布时间】：2023-01-23 11:37:38
【问题描述】：

我试图在 React 中使用 useState 挂钩将初始值设置为空函数，但是当我尝试 console.log 状态变量时，我得到了未定义。

这是我正在使用的代码：

import {useState} from 'react';

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

我也尝试过使用 useEffect 挂钩来更新状态，但我仍然未定义。

我是 React 的新手，我不确定自己做错了什么。有人可以帮助我理解为什么我变得不确定以及如何解决它吗？

【问题讨论】：

标签： javascript reactjs react-hooks undefined

【解决方案1】：

useState 可以选择使用一个函数来产生初始值作为性能增强。所以它看到你的函数返回 undefined 作为初始值设定项。

尝试

      //  ,----- this is a function that returns a
      //  v      function that does nothing
useState(() => () => {})

【讨论】：

【解决方案2】：

将函数传递给 useState 表示 lazy initialization - 函数被调用一次当组件挂载时，函数返回的值决定了初始值。

如果你想让状态成为一个函数，你需要有一个返回函数的函数。

const [callback, setCallback] = useState(() => () => {});

但是将状态作为函数几乎没有意义。使用更合适的东西，比如useCallback，或者只声明一个简单的函数。

const callback = () => {
  // ...
};

【讨论】：