我的減速器 function 沒有顯示我在反應中獲取的數據。 我不知道我做錯了什么

Question

我無法顯示從 API 獲取的數據。 當我使用 componentDidMount 從我的應用程序組件中獲取數據時，它會顯示所有產品。 但是當我嘗試將 state 移動到上下文 API 時，我似乎無法顯示所有產品。 我是新來的。 我需要幫助看看我錯過了什么。

這是我的減速機 function

import  { LOAD_ITEMS } from '../types'

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

            default: 
            return state
    }
}

在我的 ProductState 中，我試圖從 API 獲取數據以顯示它

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

這是我導入 productcontext 以在我的組件中顯示獲取的數據的地方

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

這是我導入 ProductState 的根 App.js 文件。

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;

下圖是我從 app.js 獲取數據時的顯示方式

Answer 1

問題似乎是您的loadProducts function：

您錯誤地使用了 async 關鍵字！ 它應該在你寫的時候工作

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

如您所見，使用 async 時，您不再需要使用通常的Promise.then語法。 您可能希望在 async await 上閱讀此 MDN 頁面。