Question

我正在研究React-Redux并创建一个商店前端来测试我的技能。但是，我遇到了一个我无法解决的问题。

我的API返回了我在数据库上的所有产品，因此我将其更改为按类别过滤。所以我更改了 ProductList 组件和 SingleProduct 组件以反映该更改。之后，API调用返回时， ProductList 不会呈现。我的 App.jsx 是呈现整个页面的主要组件， ProductsList 是使用 {this.props.children} 呈现的，但是要发送组件的类别ID，我将其更改为___，如下所示：

App.jsx

class App extends Component {
    render() {
        let category = 600;
        return (
            <div className="page">
                <Helmet titleTemplate="Ecommerce - %s" />
                <Header />
                <Navbar />
                <MainBanner />
                <Tabs />
                <ProductList category={category} />
                <Footer />
            </div>
        )
    }
}

ProductList.jsx

class ProductList extends Component {
    addToCart(id) {
        this.props.addToCart(id);
    }
    addToWishlist(id) {
        this.props.addToWishlist(id);
    }
    removeFromCart(id) {
        this.props.removeFromCart(id);
    }
    removeFromWishlist(id) {
        this.props.removeFromWishlist(id);
    }
    componentDidMount() {
        this.props.fetchProducts(this.props.category);
    }

    render() {
        return (
            <div className="tab1">
                <div className="category-products slider-home">
                    <ul className="home_slider products-grid products-grid--max-2-col slick-initialized slick-slider">
                        {this.props.products.map((product) => {
                            <ProductItem key={product.id}
                                product={product}
                                addToCart={this.addToCart.bind(this)}
                                addToWishlist={this.addToWishlist.bind(this)}
                                                            removeFromWishlist={this.removeFromWishlist.bind(this)}
                                removeFromCart={this.removeFromCart.bind(this)}
                                wishlist={this.props.wishlist}
                                cart={this.props.cart} />
                        })}
                    </ul>
                </div>
            </div>
        );
    }
}

const mapDispatchToProps = (dispatch, ownProps) => ({
    addToCart: (id) => dispatch(addToCard(id)),
    addToWishlist: (id) => dispatch(addToWishlist(id)),
    removeFromCart: (id) => dispatch(removeFromCart(id)),
    removeFromWishlist: (id) => dispatch(removeFromWishlist(id)),
    fetchProducts: () => dispatch(fetchProducts(ownProps.category)),
});

const mapStateToProps = (state) => {
    return {
        products: state.ProductsReducer.data,
        wishlist: state.WishlistReducer.data,
        cart: state.CartReducer.data
    }
}

fetchProducts.js

const requestProducts = () => {
    return {
        type: 'REQUEST_PRODUCTS',
    }
}

const receiveProducts = (data) => {
    return {
        type: 'RECEIVE_PRODUCTS',
        payload:data
    }
}

export const fetchProducts = (data) => {
    return dispatch => {
        dispatch(requestProducts());
        return axios.get('http://localhost/api/products/getProducts?category_id='+data, {})
           .then(response => response)
           .then(json => {
               dispatch(receiveProducts(json.data))
           })
       }
 }

ProductsReducer.js

const ProductsReducer = (state = {fetching:false,data:[]}, action) => {
   switch(action.type){
      case 'REQUEST_PRODUCTS':
        return Object.assign({}, state,{
          fetching:true,
          data:[]
        })
        break
      case 'RECEIVE_PRODUCTS':
        return Object.assign({}, state,{
          fetching:false,
          data:action.payload
        })
        break
      default:
      return state
   }
}

最后，我得到的错误和记录结果： See here

编辑后，没有错误，但组件尚未渲染。See here

编辑0：

将 ProductList componentWillMount（）更改为 componentDidMount
添加了另一个控制台图片

编辑1： - 将ProductList.jsx更改为最新版本。（仍未呈现列表）

为什么我的react-redux组件在api请求返回时不呈现？

0 个答案: