反应 useContext useReducer state 挂钩错误

Question

import Axios from "axios";
import React, { createContext, useEffect, useReducer, useState } from "react";
import useAsync from "./useAsync";

const [datas, setDatas] = useState(null);

const fatchData = async () => {
  try {
    const response = await Axios.get(
      "https://jsonplaceholder.typicode.com/users"
    );
    setDatas(response.data);
  } catch (e) {
    console.log(e);
  }
};
useEffect(() => {
  fatchData();
  //eslint-disable-next-line
}, deps);
const AppReducer = (state, action) => {
  switch (action.type) {
    default:
      return state;
  }
};
export const GlobalContext = createContext(datas);

export const GlobalProvider = ({ children }) => {
  const [state, dispatch] = useReducer(AppReducer, datas);

  return (
    <GlobalContext.Provider value={{ datas }}>
      {children}
    </GlobalContext.Provider>
  );
};

This is the error. This could happen for one of the following reasons.

1. You might have missed versions of React and the Render (such as React DOM) You might be breaking the Rules of Hooks You might have more than one copy of React in the same app.

I want to put the data that received API as the default value of useReducher. But there was a hooks error. Can't you delete or modify data received using useContext?

Will it work normally if I use Graphql instead of restAPI? And is there a good way to manage data received from servers using useContext?

Answer 1

You need to move every hooks into your function component's body. If they are outside of that technically they are violating the rules of hooks. Read further about Rules of Hooks :

Don't call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That's what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls.

Try as the following:

import Axios from "axios";
import React, { createContext, useEffect, useReducer, useState } from "react";
import useAsync from "./useAsync";

export const GlobalContext = createContext(null);

export const GlobalProvider = ({ children }) => {
  const [state, dispatch] = useReducer(AppReducer, datas);
  const [datas, setDatas] = useState(null);

  const fatchData = async () => {
    try {
      const response = await Axios.get(
        "https://jsonplaceholder.typicode.com/users"
      );
      setDatas(response.data);
    } catch (e) {
      console.log(e);
    }
  };

  useEffect(() => {
    fatchData();
    //eslint-disable-next-line
  }, deps);

  const AppReducer = (state, action) => {
    switch (action.type) {
      default:
        return state;
    }
  };

  return (
    <GlobalContext.Provider value={{ datas }}>
      {children}
    </GlobalContext.Provider>
  );
};