我的减速器 function 没有显示我在反应中获取的数据。 我不知道我做错了什么

Question

I'm having trouble diplaying the data im fetching from an API. when I fetch the data from my app component with componentDidMount it displays all the products. but as I try to move the state to context API, I cant seem to get all the products to display. I'm new at this. i need help seeing what I'm missing.

This is my reducer function

import  { LOAD_ITEMS } from '../types'

export default (state, action) => {
    switch(action.type) {
        case LOAD_ITEMS:
            return {
                ...state,
                products: [...action.payload]
            }

            default: 
            return state
    }
}

Here in my ProductState, I'm trying to fetch data from the API to display it

import React, { useReducer } from 'react'
import ProductContext from './ProductContext'
import productReducer from './productReducer'
import {
    LOAD_ITEMS, INCEASE, DECREASE, ADD_ITEM, REMOVE_ITEM, CLEAR, CHECKOUT
} from '../types'

const ProductState = props => {
    const initialState = {
        products: []
    }
   
    const [state, dispatch] = useReducer(productReducer, initialState)

     const loadProducts = async () => {
        
              await fetch('https://fakestoreapi.com/products') 
              .then(res => res.json())
              .then(data => {
                dispatch({
                    type: LOAD_ITEMS,
                    payload: data
                })
              })
             
          }

    return <ProductContext.Provider value={{ 
        products: state.products,
        loadProducts
    }}>
        {props.children}
    </ProductContext.Provider>
}

export default ProductState

This is where I'm importing the productcontext to display the fetched data in my component

import React, { useContext } from 'react'
import ProductItem from './ProductItem'
import styles from './ProductsGrid.module.scss';
import ProductContext from '../../context/products/ProductContext'

const Products = () => {
    const productContext = useContext(ProductContext)

    const { products } = productContext
        return (
           
            <div className={styles.p__grid}>
                 {products.map(product => (
                        <ProductItem key={product.id} product={product}/>))
                }

            </div>
            <div className={styles.p__footer}>

            </div>
        </div>
        )   
}

export default Products

And this is the root App.js file where I import the ProductState.

import React, { Component, Fragment } from "react";
import {BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Header from './components/header/Header'
import Store from './components/product/index'
import About from './components/pages/About'
import Cart from './components/cart/Cart'
import ProductState from './context/products/ProductState'


class App extends Component {
  // state={ 
  //   products: []
  // }

  // async componentDidMount() {
  //   try {
  //     const res = await fetch('https://fakestoreapi.com/products') 
  //     const resData  = await res.json();
  //     this.setState({ products: resData })

  //   } catch (err) {
  //     console.error(err);
  //   }
  // }

  render() {
    return (
      <ProductState>
      <Router>
        <Switch>
      <Fragment>
        <Header />
        <div className='container'>
          <Route exact path='/' component={Store} />
          <Route path='/about' component={About}  />
          <Route path='/cart' component={Cart} />
         
        </div>
      </Fragment>
      </Switch>
      </Router>
      </ProductState>
    );
  }
  
}

export default App;

The image below is how it displays when I fetch the data from my app.js

Answer 1

The problem seems to be your loadProducts function:

You are using the async keyword incorrectly! It should work when you write

const loadProducts = async () => {        
          const res = await fetch('https://fakestoreapi.com/products');
          const data = await res.json();
          dispatch({
                type: LOAD_ITEMS,
                payload: data
            });             
         
      }

As you can see, when using async you no longer have to use the usual Promise.then syntax. You might want to give this MDN page on async await a read.