React에서 React.useState(() = > {})를 사용할 수 있습니까?

React에서 React.useState(() = > {})를 사용할 수 있습니까?

를 사용할 수 있습니까?function리액트 컴포넌트 상태로요?

코드 예:

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

후크를 사용하여 함수를 상태로 설정할 수 있지만 초기 상태 또는 업데이트된 상태를 반환하는 함수로 상태를 초기화 및 업데이트할 수 있으므로 원하는 함수를 차례로 제공해야 합니다.

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;DR

예, 기능을 React Component의 상태로 사용할 수 있습니다.이를 위해서는 다음에서 함수를 반환하는 기능을 사용해야 합니다.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유형과의 반응에서

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.log('default ooops')
);

'default ooops'는 즉시 로그에 기록됩니다.React.useState호출되어 반환값(이 경우)undefined)이 저장됩니다.

이는 저장하려는 함수를 반환하는 고차 함수를 제공함으로써 방지할 수 있습니다.

const [ooops, setOoops] = React.useState<OoopsFunction>(
    () => () => console.log('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));

언급URL : https://stackoverflow.com/questions/55621212/is-it-possible-to-react-usestate-in-react