在React中可以使用React.useState（（）=> {}）吗？

Question

是否可以使用function作为我的React Component的状态？

这里的示例代码：

// typescript 
type OoopsFunction = () => void;

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

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

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

但它不起作用... defaultOoops将在一开始就被调用，当点击change oops时，otrher ooops将立即记录到控制台，而不是再次点击Show Ooops后记录。

为什么？

我可以使用函数作为组件的状态吗？

或者React有其特殊的方法来处理这样的the function state？

Answer 1

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

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>

Answer 2

在React中实施useState是

export function useState<S>(initialState: (() => S) | S) {
  const dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}

它表明，您确实可以使用函数作为参数，并且此函数必须返回类型S。在你的情况下S将是undefined，因为() => console.log(...)没有返回任何内容，尽管你明确指定为OoopsFunction。

因此，如果您想通过useState将函数存储为状态，则必须实现Tholle的方法，其中函数实际返回函数而不是undefined。