Redux Dispatch/React Hooks 사용을 위한 도우미 함수
반복적으로 예약되는 여러 구성요소가 있습니다. 도우미 기능을 사용하여 여러 구성 요소를 가져와 사용하고 싶습니다. 놀랍게도 그것은 쉽지 않습니다. 적어도 나에게는 그렇습니다. 이것에 대해 많이 읽었지만 관련이 없습니다.
제가 겪은 문제는 React-dom.development.js:16227 Uncaught Error: Invalid Hook Call이었습니다. Hooks는 기능적 구성 요소의 본문 내부에서만 호출할 수 있습니다. 이는 다음 이유 중 하나로 인해 발생할 수 있습니다. Hooks 규칙을 위반했을 수도 있습니다
그럼 도우미 함수에서 예약을 호출하는 방법은 무엇인가요? 내 생각에는 맞춤형 후크가 좋은 방법일 것 같습니다. 지금 살펴보겠습니다.
간소화된 구성 요소의 예:
으아악단순화된 보조 기능:
...imports...
import { helperCall } from '../../assets/helperFunctions/helperCall';
export default function CompExamp() {
...variables...
return (
<div className="min-w-0 flex-1"
onClick={(e) => helperCall(e, searchText, searchType)}
>
<span className="absolute inset-0" aria-hidden="true" />
<p className="text-sm font-medium text-black">Target</p>
<p className="text-base text-gray-700">test</p>
</div>
)
}