Question

我正在尝试在购物车中显示商品。我制作了一个“ BagItem”组件，以在redux中显示有关商品的信息，该商品来自处于状态cart数组中的对象。我还制作了一个“包”组件，可以在其中映射购物车信息并返回“包项目”组件。

一切似乎都在使用map函数。当我console.log在BagItem组件中的信息时，我会看到所有需要显示的属性。问题在于在Bag组件中，BagItem组件将无法渲染。加载网页时，我看到了StoreNav和小计文本，但是BagItem组件没有显示。

我对React还是很陌生，我敢肯定我很想念一些东西。我一直在努力解决问题，对于您能提供的任何帮助，我将非常感谢。

袋组件：

import React, { Component } from "react";
import { connect } from "react-redux";
import StoreNav from "../store/StoreNav";
import BagItem from "../bag/BagItem";
import { getCart } from "../../ducks/reducer";


class Bag extends Component {
constructor(props) {
    super(props);
    this.state={} 
}

componentDidMount(){
  this.props.getCart()

  console.log(this.props.cart)
}

componentDidUpdate(){
  this.props.getCart()
}

render() {

const bagList =

 this.props.cart && this.props.cart.map(element => {
    console.log(this.props.cart)
  return   <BagItem 
  element={element}
  id={element.id}
  key= {`${element.id}${element.name}${element.price}${element.image}${element.size}${element.sleeves}${element.fabric}${element.length}`}
  name={element.name}
  image={element.image}
  size={element.size}
  price={element.price}
  sleeves={element.sleeves}
  fabric={element.fabric}
  length={element.length}

   />

})


return (
  <div>
    <StoreNav />
    {bagList}

    <p>Subtotal</p>


  </div>
);
}
}

const mapStateToProps = state => {
return {
  cart: state.cart
};
};

export default connect(
mapStateToProps,
{ getCart: getCart }
)(Bag);

BAGITEM组件

 import React, { Component } from "react";
 import { connect } from "react-redux";

 import "./bagitem.css";

 import { getCart } from "../../ducks/reducer";


  class BagItem extends Component {

  componentDidMount(){
    this.props.getCart()
    console.log(this.props.cart[0][0].name)

  }

  render() {

return (
  <div className="bag-item-component-container">

    <div className="bag-item-component">

      <div className="bag-item-row1">
        <div>Size</div>
        <div>Quantity</div>
        <div>Price</div>
        <div>Remove</div>
      </div>
      {/* <div className="bag-item-row2">
    placeholder
    </div> */}
      <div className="bag-item-image-and-details-container">
        <div className="img1">
          <img className="item-image" alt="" src={this.props.cart[0][0].image} />
        </div>
        <div>{this.props.cart[0][0].name}
        <div className="details">
        <div>sleeves</div>
        <div>length</div>
        <div>fabric</div>
        </div>
        </div>
      </div>

    </div>
  </div>
  );
 }
  }

 const mapStateToProps = state => {
return {
  cart: state.cart
};
};

export default connect(
mapStateToProps,
{ getCart: getCart }
 )(BagItem);

Answer 1

您正在将一个函数传递给bagList。因此，您应该调用它，或者可以将呈现的组件传递给该变量。

const bagList = this.props.cart && this.props.cart.map(element => <BagItem ... />)

阅读：https://reactjs.org/docs/lists-and-keys.html

Answer 2

通常，您不需要分离BagItem渲染器。并且您已经传递了元素道具，因此请在BagItem中使用元素道具。

import React, { Component } from "react";
import { connect } from "react-redux";
import StoreNav from "../store/StoreNav";
import BagItem from "../bag/BagItem";
import { getCart } from "../../ducks/reducer";


class Bag extends Component {
constructor(props) {
    super(props);
    this.state={} 
}

componentDidMount(){
  this.props.getCart()

  console.log(this.props.cart)
}

componentDidUpdate(){
  this.props.getCart()
}

render() {

return (
  <div>
    <StoreNav />
     {
    this.props.cart && this.props.cart.map(element => (
    <BagItem 
    element={element}
    id={element.id}
    key= {element.id}
     />}))
    <p>Subtotal</p>


  </div>
);
}
}

const mapStateToProps = state => {
return {
  cart: state.cart
};
};

export default connect(
mapStateToProps,
{ getCart: getCart }
)(Bag);

Answer 3

我实际上是通过更改子组件（BagItem）使它工作的，这样它就不会从redux接收购物车道具，而只是从父组件（Bag）接收它们。我必须确保通过构造函数携带道具。这是经过修改的BagItem组件：

import React, { Component } from "react";
import { connect } from "react-redux";

import "./bagitem.css";

 // import { getCart } from "../../ducks/reducer";


 class BagItem extends Component {
 constructor(props){
    super(props)
    this.state={}
 }

// componentDidMount(){
//     this.props.getCart()
//     console.log(this.props.cart[0][0].name)

// }

  render() {
      console.log(this.props.element)

return (
  <div className="bag-item-component-container">

    <div className="bag-item-component">

      <div className="bag-item-row1">
        <div>Size</div>
        <div>Quantity</div>
        <div>Price</div>
        <div>Remove</div>
      </div>
      {/* <div className="bag-item-row2">
    placeholder
    </div> */}
      <div className="bag-item-image-and-details-container">
        <div className="img1">
          <img className="item-image" alt="" src={this.props.element.image} />
        </div>
        <div>{this.props.element.name}
        <div className="details">
        <div>sleeves: {this.props.element.sleeves}</div>
        <div>length: {this.props.element.length}</div>
        <div>fabric {this.props.element.fabric}</div>
        </div>
        </div>
      </div>

    </div>
  </div>
);
}
 }

 // const mapStateToProps = state => {
 //     return {
 //       cart: state.cart
//     };
 //   };

 //   export default connect(
//     mapStateToProps,
//     { getCart: getCart }
//   )(BagItem);


export default BagItem

地图函数中返回的组件将无法呈现

3 个答案: