反应 useContext useReducer 状态 Hooks 错误

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>
  );
};

这是错误。这可能是由于以下原因之一。

1. 您可能错过了 React 和 Render 的版本（例如 React DOM） 您可能违反了 Hooks 规则 您可能在同一个应用中拥有多个 React 副本。

我想把接收到API的数据作为useReducer的默认值。但是有一个钩子错误。 您不能删除或修改使用 useContext 接收到的数据吗？

如果我使用 Graphql 而不是 restAPI，它会正常工作吗？ 有没有使用 useContext 管理从服务器接收到的数据的好方法？

Answer 1

您需要将每个钩子移动到函数组件的主体中。如果他们在技术上超出了这个范围，他们就违反了钩子规则。进一步了解Rules of Hooks：

不要在循环、条件或嵌套函数中调用 Hooks。相反，请始终在 React 函数的顶层使用 Hooks。通过遵循此规则，您可以确保每次渲染组件时都以相同的顺序调用 Hook。这就是让 React 在多个 useState 和 useEffect 调用之间正确保留 Hook 状态的原因。

尝试如下：

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>
  );
};