Redux等待异步操作到Fnish
我收到TypeError:无法读取产品中未定义的属性“map”,因为它是在更新存储中的产品之前呈现的。因此,我正在映射一个空数组 我的问题是-在呈现产品组件之前,如何等待异步操作(fetchProducts)完成 产品的工作原理: 在应用程序中,fetchProducts从api抓取数据;同时state.status为“” 它分派(fetchProductsRequest())并将state.status更改为“loading” 最后,如果产品获取成功,它将调度(fetchProductsAccess())并将state.status更改为“success” Products.jsRedux等待异步操作到Fnish,redux,react-redux,redux-thunk,Redux,React Redux,Redux Thunk,我收到TypeError:无法读取产品中未定义的属性“map”,因为它是在更新存储中的产品之前呈现的。因此,我正在映射一个空数组 我的问题是-在呈现产品组件之前,如何等待异步操作(fetchProducts)完成 产品的工作原理: 在应用程序中,fetchProducts从api抓取数据;同时state.status为“” 它分派(fetchProductsRequest())并将state.status更改为“loading” 最后,如果产品获取成功,它将调度(fetchProductsAcc
import React, { Component } from 'react';
import Product from './Product';
const Products = ({ products, addToCart }) => {
console.log(products);
console.log(addToCart);
return (
<div className='img-container'>
{products.map((product, index) => {
let num = index + 1;
return (
<Product key={product.name} image={product.image} name={product.name}
price={product.price} num={num} addToCart={addToCart} />
);
})}
</div>
);
};
import React from 'react';
import { connect } from 'react-redux';
import AddToCart from '../actions/AddToCart';
import Products from '../components/Products';
const ProductsContainer = ({ products, addToCart }) => {
console.log(products);
return (
<Products products={products} addToCart={addToCart} />
);
}
const mapStateToProps = state => ({
products: state.products
});
const mapDispatchToProps = dispatch => ({
AddToCart: (num, cartItem) => dispatch(AddToCart(num, cartItem))
});
export default connect(mapStateToProps, mapDispatchToProps)(ProductsContainer);
import FetchProductsRequest from './FetchProductsRequest';
import FetchProductsSuccess from './FetchProductsSuccess';
const FetchProducts = () => {
return (dispatch) => {
fetch('/products')
.then(res => res.json())
.then(res => dispatch(FetchProductsSuccess(res)))
.catch(err => console.log(err));
dispatch(FetchProductsRequest());
}
}
export default FetchProducts;
使ProductsContainer成为类组件,而不是功能组件 在ProductsContainer中的componentDidMount调用操作 在ProductsContainer的render方法中,执行如下操作
render(){
if (!this.state.products){
return <div>Loading</div>
}
return (
<Products products={this.state.products} />
);
}
render(){
如果(!this.state.products){
回装
}
返回(
);
}
在哪里调用了FetchProducts
函数?另外,在App中调用FetchProductsRequest
fetchproductsAccessfetchProducts之前,您应该发送fetchProducts请求,而不是ProductsContainer,让我编辑我的帖子,因此在这种情况下,您不需要在componentDidMount中调用它。跳过这一步。其余的都一样。