如何修复错误“react use hook cannot be called inside a callback function"使用反应? [英] How to fix the error "react use hook cannot be called inside a callback function" using react?

问题描述

我在 return 语句中使用名为 useGetCompanyByItemId 的 useHook.

所以我收到错误不能在回调函数中调用react钩子"

我想做什么?

我正在查询拥有的物品和共享物品.

并且我显示这两个项目.在 Content div 中，我进行了映射，并在那里调用了 useGetCompanyByItemId 钩子，但出现错误.

下面是我的代码，

function Parent() {const ownItems = [{//一些对象数组}];const sharedItems = [{//somearray of objects}];const getCurrentItems = () =>{返回ownedItems.concat(sharedItems);}返回 (<包装器>{getCurrentItems.length>0 &&<FirstWrapper>//somedivs</FirstWrapper><内容>{springProps.map((index) => {const item = getCurrentItems()[index];const isSharedItem = item &&item.cognitoId !== cognitoId;const company = useGetCompanyByItemId(item.id);//这里是错误返回 (<>{isSharedItem &&<div><span>公司</span>

}</>})});</内容></包装器>);

}

我不知道如何解决这个问题.我需要为 useGetCompanyById 钩子传递 item.id，但我不知道如何从 return 语句外部传递 item.id，因为这将修复该错误.

有人能帮我解决这个错误吗?谢谢.

解决方案

将此逻辑提取到组件中

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

)}</>);}

然后在循环中使用它

springProps.map((index) => {...return 

i am using useHook named useGetCompanyByItemId in the return statement.

and so i am getting the error "react hook cannot be called in a callback function"

what i am trying to do?

i am querying for owneditems and shareditems.

and i display both the items. in the Content div i do mapping and there i am calling the useGetCompanyByItemId hook and i get the error.

below is my 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>
);

}

i am not sure how to fix this. i need to pass the item.id for the useGetCompanyById hook and i dont know how to pass that item.id from outside the return statement since that would fix that error.

could someone help me fix this error. thanks.

解决方案

Extract this logic to a component

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

and then use it in your loop

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

这篇关于如何修复错误“react use hook cannot be called inside a callback function"使用反应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！