Можно установить функцию в состояние с помощью хуков, но поскольку состояние может быть инициализировано и обновлено с помощью функции, которая возвращает начальное состояние или обновленное состояние, вам необходимо предоставить функцию, которая, в свою очередь, возвращает функцию, которую вы хотите поместить. состояние.

const { useState } = React;

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

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

      <button
        onClick = {() => {
          setOoops(() => () => console.info("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;DR

Да, можно использовать функцию в качестве состояния компонента React. Для этого необходимо используйте функцию, возвращающую вашу функцию в React.useState:

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

// or

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

Чтобы обновить свою функцию, вы также должны используйте функцию, возвращающую вашу функцию:

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

// or

const otherFunction = () => console.info("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, то эта функция выполняется, когда выполняется React.useState, и возвращаемое значение сохраняется как начальное состояние.

Как на самом деле хранить функции

Проблема здесь в том, что если вы хотите сохранить функцию как состояние, вы не можете предоставить ее как начальное состояние как есть, потому что это приводит к выполняемая функция и ее возвращаемое значение, хранящееся как состояние, а не сама функция. Поэтому, когда вы пишете

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

'default ooops' регистрируется сразу же при вызове React.useState и сохраняется возвращаемое значение (в данном случае undefined).

Это может быть избежать, предоставив функцию более высокого порядка, возвращающую вашу функцию, которую вы хотите сохранить:

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

Таким образом, внешняя функция обязательно будет выполнена при первом запуске React.useState, и ее возвращаемое значение будет сохранено. Поскольку это возвращаемое значение теперь является вашей необходимой функцией, эта функция будет сохранена.

Примечания о функции установки состояния

Сигнатура функции установки состояния (здесь 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));