javascript - 使用 axios 将数据提取到上下文中

Question

我正在尝试使用从 api 获得的数据创建一个 reactContext。当我尝试在我的组件“家庭”产品中显示数据时，它似乎未定义。这是在上下文中存储 api 数据的正确方法吗？谢谢！pd：我将 de base api url 更改为另一个以进行测试

上下文.js

import {
  createContext,
  useState,
  useEffect,
  useReducer,
  useContext,
} from "react";
import axios from "axios";
import { cartReducer } from "./Reducers";

const Cart = createContext();


const Context = ({ children }) => {
  //estado productos
  const [products, setProducts] = useState([]);

  //funcion traer productos
  const fetchProducts = () => {
    axios.get("https://aves.ninjas.cl/api/birds").then((response) => {
      //almacenar productos en el estado
      setProducts(response.data);
    });
  };

  //efecto para traer productos de api
  useEffect(() => {
    fetchProducts();
  }, []);

  //cart reducer

  const [state, dispatch] = useReducer(cartReducer, {
    products: products,
    cart: [],
  });

  //console.log(products); // <--- the products are inside de variable
  //console.log(state); // <-- state are {products: Array(0), cart: Array(0)}

  return <Cart.Provider value={{ state, dispatch }}>{children}</Cart.Provider>;
};

export const CartState = () => {
  return useContext(Cart);
};

export default Context;

减速器.js

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

主页组件 (Home.js)

import { CartState } from "../../context/Context";

import "./Home.css";

const Home = () => {
const { state } = CartState();
 console.log(state);
  return <div>home page</div>;
};

export default Home; 

应用程序.js

import Header from "./components/Header/Header";
import { BrowserRouter, Route } from "react-router-dom";
import Cart from "./components/Cart/Cart";
import Home from "./components/Home/Home";
import "./App.css";

function App() {
  return (
    <BrowserRouter>
      <Header />
      <>
        <Route path="/" exact>
          <Home />
        </Route>
        <Route path="/cart" exact>
          <Cart />
        </Route>
      </>
    </BrowserRouter>
  );
}

export default App;

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";

import "bootstrap/dist/css/bootstrap.min.css";
import Context from "./context/Context";

ReactDOM.render(
  <React.StrictMode>
    <Context>
      <App />
    </Context>
  </React.StrictMode>,
  document.getElementById("root")
);

标签： javascriptreactjsaxios