如何使用 react 修复错误"react use hook cannot be called inside a callback function"？

Question

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

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

我想做什么

我正在查询所有者项和共享项。

并且我显示这两个项目。在Contentdiv中，我进行映射，在那里我调用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。

有人能帮我纠正这个错误吗。谢谢

Answer 1

将此逻辑提取到组件

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} />

Answer 2

我可以在这里看到两种重构方法：

选项1：如果您无法控制自定义挂钩来修改

将迭代提取到组件中：

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

迭代时使用上面的组件。

选项2：如果您可以控制自定义钩子：我建议重构自定义钩子以返回一个方法而不是对象。示例用法：

const {getCompanyByItemId} = useFetchCompany();

。.

在代码中的任何地方，getCompanyByItemId(itemId)

上述选项具有明显优势：

• 可读且可扩展，可在任何地方使用，甚至可以四处传播
• 您不必担心重构和代码分割，只是为了不破坏钩子规则(当然，如果有意义的话，就这样做(