Zoeken op website

reactjs - Hoe los je de fout 'react use hook kan niet worden aangeroepen binnen een callbackfunctie' op met react?

Ik gebruik een hook genaamd useGetCompanyByItemId in de return statement.

en dus krijg ik de foutmelding "react hook kan niet in een callbackfunctie worden aangeroepen"

wat probeer ik te doen?

Ik vraag naar owneditems en shareditems.

en ik toon beide items. In de Content-div doe ik mapping en daar roep ik de useGetCompanyByItemId-hook aan en krijg ik de fout.

hieronder is mijn code,

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

}

Ik weet niet zeker hoe ik dit moet oplossen. Ik moet het item.id doorgeven aan de useGetCompanyById hook en ik weet niet hoe ik dat item.id van buiten de return statement kan doorgeven, aangezien dat die fout zou oplossen.

kan iemand me helpen deze fout te herstellen. bedankt.

Antwoord #1

Ik zie hier twee manieren om te herstructureren:

Optie 1: Als je geen controle hebt over de aangepaste hook om te wijzigen

Haal de iteratie naar een component:

const Company = ({itemId, isSharedItem}) => {
   const company = useGetCompanyByItemId(itemId);
   return (<>
      {isSharedItem && 
          (<div>
             <span>{company}</span>
           </div>)
      }
      </>);
}

Gebruik het bovenstaande onderdeel terwijl je iteratief te werk gaat.

Optie 2: Als je controle hebt over de aangepaste hook: Ik zou aanbevelen om de aangepaste hook te herstructureren om een methode in plaats van een object terug te geven. Voorbeeldgebruik:

const {getCompanyByItemId} = useFetchCompany();

. . .

ergens in de code, getCompanyByItemId(itemId)

Voor de hand liggend voordeel van bovenstaande optie: :

  • Leesbaar en uitbreidbaar en overal te gebruiken en zelfs door te geven
  • Je hoeft je geen zorgen te maken over refactoren en code splitsen, zolang je de hook-regels niet breekt (doe dit natuurlijk als het logisch is).

Antwoord #2

Haal deze logica naar een component

function Item({ item, isSharedItem }) {
  const company = useGetCompanyByItemId(item.id);
  return (
    <>
      {isSharedItem && (
        <div>
          <span>company</span>
        </div>
      )}
    </>
  );
}

en gebruik het dan in je lus

springProps.map((index) => {
  ...
  return <Item item={item} isSharedItem={isSharedItem} key={index} />

Gerelateerde artikelen