是否可以在 React 中使用 React.useState(() => {}) ? [英] is it possible to React.useState(() => {}) in React?

问题描述

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

此处的示例代码:

//打字稿类型 OoopsFunction = () =>空白;导出函数 App() {const [ooops, setOoops] = React.useState(() =>console.log('默认 ooops'));返回 (<div><div onClick={ 哎呀 }>显示哎呀

<div onClick={() =>{setOoops(() => console.log('other ooops'))}}>更改哎呀

)}

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

为什么?

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

或者 React 有它特殊的方式来处理这样的 函数状态?

解决方案

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

const { useState } = React;功能应用(){const [ooops, setOoops] = useState(() => () => console.log("default ooops"));返回 (<div><button onClick={ooops}>显示 Ooops</button><按钮onClick={() =>{setOoops(() => () => console.log("other ooops"));}}>更改哎呀

);}ReactDOM.render(, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"><;/脚本><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><div id="root"></div>

is it possible to use a function as my React Component's state ?

example code here:

// 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>
    )
}

but it doesn't works ... the defaultOoops will be invoked at very beginning, and when clicking change oops, the otrher ooops will be logged to console immediately not logging after clicking Show Ooops again.

why ?

is it possible for me to use a function as my component's state ?

or else React has its special ways to process such the function state ?

解决方案

It is possible to set a function in state using hooks, but because state can be initialized and updated with a function that returns the initial state or the updated state, you need to supply a function that in turn returns the function you want to put in state.

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>

这篇关于是否可以在 React 中使用 React.useState(() => {}) ?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！