我的减速器 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 页面。