return 문에서 useGetCompanyByItemId라는 useHook을 사용하고 있습니다.
그래서 "반응 후크는 콜백 함수에서 호출 할 수 없습니다"라는 오류가 발생합니다.
내가 뭘하려는거야?
소유 항목 및 공유 항목을 쿼리하고 있습니다.
두 항목을 모두 표시합니다. Content div에서 매핑을 수행하고 거기에서 useGetCompanyByItemId 후크를 호출하고 오류가 발생합니다.
아래는 내 코드입니다.
function Parent() {
const ownedItems = [{ //somearray of objects}];
const sharedItems = [{//somearray of objects}];
const getCurrentItems = () => {
return ownedItems.concat(sharedItems);
}
return (
<Wrapper>
{getCurrentItems.length> 0 &&
<FirstWrapper>
//somedivs
</FirstWrapper>
<Content>
{springProps.map((index) => {
const item = getCurrentItems()[index];
const isSharedItem = item && item.cognitoId !== cognitoId;
const company = useGetCompanyByItemId(item.id); //here is the error
return (
<>
{isSharedItem &&
<div>
<span>company</span>
</div>
}
</>
}
)
}
);
</Content>
</Wrapper>
);
}
이 문제를 해결하는 방법을 잘 모르겠습니다. useGetCompanyById 후크에 대한 item.id를 전달해야하며 해당 오류를 수정하기 때문에 return 문 외부에서 해당 item.id를 전달하는 방법을 모릅니다.
누군가이 오류를 수정하도록 도울 수 있습니다. 감사.
이 논리를 구성 요소로 추출
function Item({ item, isSharedItem }) {
const company = useGetCompanyByItemId(item.id);
return (
<>
{isSharedItem && (
<div>
<span>company</span>
</div>
)}
</>
);
}
그런 다음 루프에서 사용하십시오.
springProps.map((index) => {
...
return <Item item={item} isSharedItem={isSharedItem} key={index} />
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다