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

Question

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

我还是 redux 的初学者，有没有办法实现我想要的？

flatlist渲染函数：

const renderBatches = useCallback((animalBatch: AnimalBatch) => {
    let animalBatch: AnimalBatch= animalBatch.item;

    let { chickenBatch } = fetchBatchInfo(animalBatch);

    return (
        <Text>{animalBatch.quantity} - {chickenBatch.sex}</Text>
    );
}, [animalBatchUser]);

returns 当前 animalBatch 的所有数据的辅助函数：

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-rules 的信息： https://reactjs.org/docs/hooks-rules.html

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

Invalid Hook Call when calling a helper function with useSelector

react-native

react-redux

react-hooks