可以使用钩子将函数设置为状态，但是因为可以使用返回初始状态或更新状态的函数来初始化和更新状态，所以您需要提供一个函数，该函数又返回您想要放入的函数状态。

const { useState } = React;

function App() {
  const [ooops, setOoops] = useState(() => () => console.log("default ooops"));

  return (
    <div>
      <button onClick={ooops}>Show Ooops</button>

      <button
        onClick={() => {
          setOoops(() => () => console.log("other ooops"));
        }}
      >
        change oops
      </button>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

TL; 博士

是的，可以使用函数作为 React 组件的状态。为了做到这一点，就必须使用函数返回你的函数中React.useState：

const [ooops, setOoops] = React.useState<OoopsFunction>(
    () => () => console.log('default ooops')
);

// or

const yourFunction = () => console.log('default ooops');
const [ooops, setOoops] = React.useState<OoopsFunction>(
    () => yourFunction
);

要更新您的函数，您还必须使用返回您的函数的函数：

setOoops(() => () => console.log("other ooops"));

// or

const otherFunction = () => console.log("other ooops");
setOoops(() => otherFunction);

详细解答

关于的注意事项 React.useState

useState带有类型的 React 中的签名是

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

它表明，有两种方法可以在您的状态中设置初始值：

1. 按原样提供初始值（React.useState(0)- 初始值0），
2. 提供一个函数，它返回要设置的初始值（React.useState(() => 0)- 也有初始值0）。

需要注意的重要事项：如果你在 中提供了一个函数React.useState，那么这个函数就会被执行，whenReact.useState被执行并且返回值被存储为初始状态。

如何实际存储函数

这里的问题是，如果要将函数存储为状态，则不能按原样提供它作为初始状态，因为这会导致函数被执行并且其返回值存储为状态而不是函数本身。因此当你写

const [ooops, setOoops] = React.useState<OoopsFunction>(
    () => console.log('default ooops')
);

'default ooops'被React.useState调用时立即记录并undefined存储返回值（在本例中）。

这可以通过提供一个高阶函数返回您要存储的函数来避免：

const [ooops, setOoops] = React.useState<OoopsFunction>(
    () => () => console.log('default ooops')
);

这样外部函数在第一次运行时肯定会被执行，React.useState并且它的返回值将被存储。由于此返回值现在是您需要的函数，因此将存储此函数。

关于 state setter 函数的注意事项

状态设置器函数的（此处setOoops）签名为

Dispatch<SetStateAction<S>>

和

type Dispatch<A> = (value: A) => void;
type SetStateAction<S> = S | ((prevState: S) => S);

就像在React.useState那里也有可能用一个值或一个返回值的函数来更新状态。因此，为了更新状态，还必须使用上面的高阶函数。

之前的答案使我走上了正确的轨道，但我需要稍微调整我的 setState 参数，因为我想执行一个带有参数的函数。以下对我有用！

const [handler, setHandler] = useState(() => {});

setHandler(() => () => enableScheduleById(scheduleId));