为什么我的反应组件没有更新？

Question

我有一个简单的Cart 组件，我想在其中没有商品时显示“您的购物车是空的”消息。

import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as CartActions from '../actions/cart'
import Shelf from './Shelf'
import EmptyCart from './EmptyCart'

/*
This is a container component
*/
class Cart extends Component {

  constructor(props) {
    super(props)
    this.state = {
      itemQuantity: props.cart.length
    }
  }

  render() {
    const CartItems = this.props.cart.map(
      (item, idx) =><li key={idx}>{item.name} - ${item.price}</li>
    )

    const isCartEmpty = () => this.state.itemQuantity === 0

    console.log("is cart empty? ", isCartEmpty(), "cart item quantity ", this.state.itemQuantity)

    return(
      <div className="Cart">
        <Shelf addItem={this.props.action.addToCart} />
        <h2>Cart Items</h2>
        <ol>
        { isCartEmpty() ? <EmptyCart/> : {CartItems} }
        </ol>
      </div>
    )
  }
}

function mapStateToProps(state, prop) {
  return {
    cart: state.cart
  }
}

function mapDispatchToProps(dispatch) {
  return {
     action: bindActionCreators(CartActions, dispatch)
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Cart)

我的Shelf 组件如下所示：

import React, { Component } from 'react';

class Shelf extends Component {
  constructor(props) {
    super(props)

    this.addItemToCart = this.addItemToCart.bind(this)

    this.state = {
      shelfItems: [
        { "name": 'shampoo', "price": 23 },
        { "name": 'chocolate', "price": 15 },
        { "name": 'yogurt', "price": 10 }
      ]
    }
  }

  addItemToCart(item){
    this.props.addItem(item)
  }

  render() {
    const shelfItems = this.state.shelfItems.map((item, idx) => {
      return <li key={idx}><button onClick={()=>this.addItemToCart(item)}>[+]</button>{item.name} - ${item.price}</li>
    })
    return(
      <div>
        <h2>Shelf</h2>
        <ul>
          {shelfItems}
        </ul>
      </div>
    )
  }
}
export default Shelf

购物车减速器：

export default(state = [], payload) => {
  switch (payload.type) {
    case 'add':
      return [...state, payload.item]
    default:
      return state
  }
}

addToCart 操作：

export const addToCart = (item) => {
  return {
    type: 'add',
    item
  }
}

显示空消息，但添加项目时列表未更新。我究竟做错了什么？如果我删除条件并只渲染CartItems

，代码就可以正常工作

Answer 1

这是因为您只设置了初始状态。添加项目时，您不会设置新状态。如果您使用 redux，则不需要本地状态。

试试这个：

class Cart extends Component {

  constructor(props) {
    super(props)
    this.state = {}
  }

  render() {
    const CartItems = this.props.cart.map(
      (item, idx) =><li key={idx}>{item.name} - ${item.price}</li>
    )

    const isCartEmpty = CartItems.length === 0

    return(
      <div className="Cart">
        <Shelf addItem={this.props.action.addToCart} />
        <h2>Cart Items</h2>
        <ol>
         {isCartEmpty ? <li>Your Cart is Empty</li> : CartItems}
        </ol>
      </div>
    )
  }
}