javascript - 我的减速器功能没有显示我在反应中获取的数据。我不知道我做错了什么
问题描述
我无法显示从 API 获取的数据。当我使用 componentDidMount 从我的应用程序组件中获取数据时,它会显示所有产品。但是当我尝试将状态移动到上下文 API 时,我似乎无法显示所有产品。我是新来的。我需要帮助看看我错过了什么。
这是我的减速器功能
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;
解决方案
问题似乎是你的loadProducts
功能:
您错误地使用了 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 页面。
推荐阅读
- python - 如何在 tkinter 中使用变量运行多行
- spring-boot - 无法通过 SpringBoot 使用来自 Kafka 主题的消息,但控制台消费者正在使用相同的消息
- android - 启动不植根于任何地方的 Android VPN 服务
- python - 如何使用 Python 关闭显示?
- python - 为什么 sorted() 和 max() 不返回列表的最大值?
- entity-framework - 无需硬编码即可获取 IEnumerable 的值
- reactjs - 为什么没有选择 React 的选项?
- typescript - 单元测试 AWS Lambda CDK
- html - 如何在 VBA 中实现显示内联(html/css)?
- javascript - React JS 在数组中搜索(逐个字符)