javascript - 如何将 props 从容器组件传递到类组件

Question

我试图将逻辑从类组件分离到容器组件，以便类组件只负责呈现 html。所以，我在这里有两个组件，一个是Home，它是一个类组件，另一个是Home Container，它包含Home组件的代码，即 mapStateToProps 和 mapDispatchToProps。

以下是文件： Home.js：

 render(){
        // Maps over 'items'
        let itemList = this.props.items.map((item) => {
            return (
                <div className="card" key={item.id}>
                    <img className="card-img-top" src={item.img} alt={item.title} />
                    <div className="card-body">
                        <span className="card-title">{item.title}</span>
                        <span to="/" onClick={() => {this.handleClick(item.id)}}><i className="material-icons">add</i></span>
                    </div>

                    <div className="card-content">
                        <p>Price: {item.price}</p>
                        {/* <p>{item.quantity}</p> */}
                    </div>

                </div>
            )
        })
        return(
            <div className="container">
                <h3 className="text-center">Our items</h3>
                <div className="box">
                    {itemList}
                </div>
            </div>
        )
    }

它从容器组件中获取道具，即

HomeContainer.js：

class HomeContainer extends React.Component {
    render(){
        return(
            <div>
                <Home items={this.props.items}/>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        items: state.items
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        addToCart: (id) => {dispatch(addToCart(id))}
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(HomeContainer)

我正在将道具传递给HomeContainer中的Home。

当我试图通过映射项目来访问Home组件中的这些道具时，我得到了无法读取 undefined 的属性。我该如何解决这个问题。

标签： javascriptreactjsredux