Redux 等待异步操作生效

Question

我收到类型错误：无法读取产品中未定义的属性"映射"，因为它是在更新商店中的产品之前呈现的。因此，我正在映射一个空数组。

我的问题是 - 在渲染产品组件之前，我如何等待异步操作（获取产品）完成？

抓取产品的工作原理：

在应用程序中，fetchProducts 从 API 获取数据;同时 state.status 为 "。

它调度（fetchProductsRequest（））并将state.status更改为"加载"。

最后，如果获取产品成功，它会调度（fetchProductsSuccess（））并将state.status更改为"success"。

产品.js

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>
  );
}; 

产品容器.js

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);

获取产品.js

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;

Answer 1

使产品容器成为类组件，而不是功能组件

在产品容器中，组件DidMount调用操作。

在产品容器的渲染方法中，做这样的事情。

render(){
    if (!this.state.products){
        return <div>Loading</div>
    }
    return (
        <Products products={this.state.products} />
    );
}