无效的钩子调用。 Hooks 只能在 react 函数组件内部使用... useEffect, redux

Question

I encountered a problem with my react application related to hooks. Technologies being used: React, Redux, Apollo, ChakraUI.

Here is the React component that is troubling me:

import React, { useEffect } from "react";
import { Flex, Container, Heading, Text } from "@chakra-ui/react";
import { connect, useSelector, useDispatch } from "react-redux";
import { State } from "../state/store";
import { fetchRecipes } from "../state/recipe/actions";

interface RecipesListProps {}

const RecipesList: React.FC<RecipesListProps> = ({}) => {

  const recipes = useSelector<State>(
    (state) => state.recipe.recipes
  ) as State["recipe"]["recipes"];

  const loading = useSelector<State>(
    (state) => state.recipe.loading
  ) as State["recipe"]["loading"];

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchRecipes());
  }, []);

  if (loading) {
    return <h1>Loading....</h1>;
  }
  return (
    <Flex
      m="auto"
      mt="5rem"
      w="50%"
      direction="column"
      justifyContent="center"
      alignItems="center"
    >
      <Heading>Your Recipes</Heading>
      <Flex mt="2rem" direction="column" w="100%" padding="0" gridGap="2rem">
        {recipes &&
          recipes.map((recipe) => (
            <Container
              key={recipe.id}
              bg="orange.100"
              borderRadius="0.2rem"
              padding="1rem"
              maxW="100%"
            >
              <Text fontSize="xl" fontWeight="bold">
                {recipe.title}
              </Text>
              <Text>{recipe.description}</Text>
            </Container>
          ))}
      </Flex>
    </Flex>
  );
};

export default RecipesList;

Notice the use of the useEffect() hook. This is the error I am getting:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

I am pretty sure I am disobeying rule number, 2 ie I am breaking the Rules of Hooks. As soon as I take the useEffect() call out of the component, it doesn't throw an error.

Could someone please give some guidance as to what I am doing wrong? Thanks.

Edit:

The fetchRecipes function is a Redux thunk function that fetches recipes from a graphql server

Update:

I have been hacking away at a solution to this problem. I replaced the dispatch(fetchRecipes()) call with a console.log("hello world") , and it worked perfectly!

This is boggling my mind! Is this a problem with the fetchRecipes function?

Edit:

Here's the code for the fetchRecipes function:

export const fetchRecipes = () => {
  return (dispatch: Dispatch) => {
    dispatch(fetchRecipesPending());
    const { data } = useRecipesQuery();
    const errors = data?.recipes.errors;
    const recipes = data?.recipes.recipes;
    if (errors?.length) {
      dispatch(fetchRecipesFailure(errors));
    } else {
      dispatch(fetchRecipesSuccess(recipes));
    }
  };
};

useRecipesQuery is a custom hook that was auto generated using the graphql-codegen library. It builds up on the useQuery hook from the @apollo/client library.

Answer 1

Your useEffect needs a little rewrite. You are dispatching the function fetchRecipes which in itself is a hook, but the thing dispatched should be a plain "action" (using Redux terminology here). So I guess we can fix that by breaking up your fetchRecipes fn.

A snippet of the component would now look like following:

const { data } = useRecipesQuery();

useEffect(() => {
  if (!data) {
    dispatch(fetchRecipesPending()) // I only assume you fetch on render
  }
  if (data?.recipes?.errors) {
    dispatch(fetchRecipesFailure(data?.recipes.errors)
  }
  if (data?.recipes?.recipes) {
    dispatch(fetchRecipesSuccess(data?.recipes?.recipes)))
  }
}, [data]);

Now it should be fine AND more readable. Either way, as some has already suggested, I would think about using some more standardised way like using Redux w/ Thunks or Sagas, or, even better - I see you might be doing a GQL query - if so, just use a hook for it and handle the data with Apollo Client.