是否可以在 React 中使用 React.useState(() => {})？

Question

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

示例代码在这里：

 // 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 ？

原文由 eczn 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Tholle 发布，翻译遵循 CC BY-SA 4.0 许可协议