使用useSelector调用辅助函数时，Hook调用无效

Question

我在TypeScript文件中创建了一个助手函数(fetchBatchInfo(，用于多个组件，但它返回错误"；当使用useSelector"调用函数时，钩子调用无效；因为它内部有一个useSelector。我使用的是函数renderBatches，它在FlatList renderItem中调用这个辅助函数。我尝试搜索替代方案并找到了自定义钩子，但我找不到在FlatList的渲染函数中执行自定义钩子的方法，因为它仍然是一个钩子。

我还是一个redux的初学者，有什么方法可以实现我想要的吗？

平面主义者的渲染功能：

const renderBatches = useCallback((animalBatch: AnimalBatch) => {
let animalBatch: AnimalBatch= animalBatch.item;
let { chickenBatch } = fetchBatchInfo(animalBatch);
return (
<Text>{animalBatch.quantity} - {chickenBatch.sex}</Text>
);
}, [animalBatchUser]);

返回当前animalBatch的所有数据的Helper函数：

export const fetchBatchInfo = (animalBatch: AnimalBatch) => {
const chickenBatchesUser = useSelector(
(state: RootStateOrAny) => state.batch.chickenBatchesUser);
let chickenBatch: ChickenBatch | undefined = chickenBatchesUser.find(
(chickenBatch: ChickenBatch) => chickenBatch.idChickenBatch == animalBatch.idChickenBatch)
return {
chickenBatch
};
}

在使用此辅助函数之前，它是有效的，因为chickenBatchesUser useSelector在渲染函数之外，但由于我将在其他地方使用此代码，我想使此辅助函数有效。

有人知道怎么做吗？

Answer 1

// your fetch must be defined as a hook, to be inlcuded into the react lifecylce, and hooks starts with useXXX();
export const useChickenBatch = (animalBatch: AnimalBatch) => {
const chickenBatchesUser = useSelector(
(state: RootStateOrAny) => state.batch.chickenBatchesUser);
let chickenBatch: ChickenBatch | undefined = chickenBatchesUser.find(
(chickenBatch: ChickenBatch) => chickenBatch.idChickenBatch == animalBatch.idChickenBatch)
return { chickenBatch };
}
//inside your component
const YourComponent = ({ animalBatch }) => {
let { chickenBatch } = useChickenBatch(animalBatch);  
return (
<Text>{animalBatch.quantity} - {chickenBatch.sex}</Text>
);
};

在此处阅读有关hooks规则的信息：https://reactjs.org/docs/hooks-rules.html