useState 및 eventHandlers 문제에 대한 솔루션
7229 단어 hooksjavascriptreact
import { useEffect } from "react";
import { useRefState } from "utils";
export default function HomePage() {
const [mouseDownCounter, setMouseDownCounter] = useRefState(0);
useEffect(() => {
window.addEventListener("mousedown", () => {
setMouseDownCounter(mouseDownCounter + 1);
});
}, []);
return <div>{mouseDownCounter}</div>;
}
반응 기능 프로그래밍을 사용하면 addEventListener 내에서 최신 반응 상태에 액세스하는 데 문제가 있습니다. "mouseDownCounter"값은 addEventListener 콜백 함수 내에서 항상 0입니다. 이것은 ref를 사용하여 상태를 저장하는 사용자 지정 후크를 생성하여 해결할 수 있습니다. 아래 솔루션.
import { useEffect } from "react";
import { useRefState } from "utils";
export default function HomePage() {
const [
mouseDownCounter,
setMouseDownCounter,
getMouseDownCounter,
] = useRefState(0);
useEffect(() => {
window.addEventListener("mousedown", () => {
setMouseDownCounter(getMouseDownCounter() + 1);
});
}, []);
return <div>{mouseDownCounter}</div>;
}
useRefState는 useState와 동일하지만 상태의 현재 값을 노출하는 세 번째 매개 변수가 있습니다. 현재 상태를 노출하기 위해 react ref를 사용합니다. 아래 코드.
/**
* same as use state, but we get a third param to get current value. This will be useful while working with settimeout, eventHandlers, promises and axios api calls.
*/
export function useRefState<T>(
defaultValue: T
): [T, (updatedValue: T) => void, () => T] {
const ref = useRef(defaultValue);
const [state, setState] = useState(defaultValue);
function setStateFn(updatedValue: any) {
ref.current = updatedValue;
setState(updatedValue);
}
function getValueFn() {
return ref.current;
}
return [state, setStateFn, getValueFn];
}
Reference
이 문제에 관하여(useState 및 eventHandlers 문제에 대한 솔루션), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/subbiahc/solution-for-problem-with-usestate-and-eventhandlers-41e5텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)