Question

虽然我有一个项目数组作为initialState：

export default {
  cart: [],
  products: [
    {
        id: 1,
        name: "Redux",
        price: 100000
      },
      {
        id: 2,
        name: "React",
        price: 0
      },
      {
        id: 3,
        name: "Redux DevTools",
        price: 10
      }
]
}

我通过products-reducer访问它：

import initialState from './initialState.js';


export default function products(state = initialState.products, action){
     return state;
};

以及通过products-reducer映射产品列表的Products组件：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { addToCart } from '../actions/cart-actions.js';

class Products extends Component {

  render() {

    const productList = this.props.products.map( (item,index)  => {
      return <div key={index}>
        <p style={{ color: "#767676"}}>{item.name} - {item.price} $ </p>
        <button className="button"
                onClick={() => this.props.addToCart(item)}>
          Add To Cart
        </button>
      </div>
    });

    return (
      <div className= "products">
         { productList }
      </div>
    );
  }
}

function mapStateToProps(state, props) {
    return {
        products: state.products
    };
}

function mapDispatchToProps(dispatch) {
    return {
        addToCart: item => dispatch(addToCart(item))
    }
}


export default connect(mapStateToProps, mapDispatchToProps)(Products);

我无法使用组件<Product />加载产品列表。有人可以帮助为什么它不会显示产品列表（initialState.products），即使我使用mapToStateProps并将产品与state.products连接，它们将在Product组件中包含它们的initialState？

Answer 1

如果我错了，但你正在使用initialState.products初始化状态，请纠正我。然后在您的组件mapStateToProps中访问state.products但您的状态已经是products本身。所以要解决这个问题：

function mapStateToProps(state, props) {
    return {
        products: state
        // instead of products: state.products
    };
}

所以基本上你现在正在尝试访问initialState.products.products。我希望我能正确解释自己。

无法返回组件中产品的初始状态 - Redux

1 个答案: