React无Redux购物车：state中总金额无法正确更新问题求助

嘿，我来帮你搞定这个购物车的问题～ 先看看你遇到的两个问题根源在哪：

问题分析 #

1. 首次渲染总金额为0：组件初始化时totalAmount设为0，但你没有在组件挂载后调用sumTotalAmount计算初始总金额，所以一直显示0。
2. 移除商品后总金额无变化：setState是异步操作，你在调用this.setState({ cart })后立刻执行sumTotalAmount，这时候this.state.cart还是更新前的旧数据，所以计算出来的总金额还是原来的数值。

另外还有个隐藏问题：你直接修改了state里的product对象（比如product.quantity = e.target.value），这违反了React的state不可变原则，可能会导致组件不重新渲染或者出现其他意外行为。

优雅解决方案：派生状态不存state #

其实totalAmount是完全由cart派生出来的值，根本不需要存在state里！每次渲染的时候直接计算就好，这样既避免了异步更新的坑，也不用维护额外的状态，代码更简洁可靠。

下面是修改后的完整代码，我标注了关键修改点：

const products = [ 
  { id: "1", title: "item 1", price: "2450", left: "14", quantity: "1" }, 
  { id: "2", title: "item 2", price: "2450", left: "178", quantity: "1" }, 
  { id: "3", title: "item 3", price: "2450", left: "1", quantity: "1" }, 
  { id: "4", title: "item 4", price: "2450", left: "12", quantity: "1" } 
]; 

class App extends React.Component { 
  constructor(props) { 
    super(props); 
    this.state = { 
      products: this.props.products, 
      cart: [...this.props.products] // 浅拷贝一份，避免修改原props数据
      // 移除totalAmount，不需要存在state里了
    }; 
    this.handleRemoveProduct = this.handleRemoveProduct.bind(this); 
    this.handleChangeQuantity = this.handleChangeQuantity.bind(this); 
    // 移除sumTotalAmount方法，不需要了
  } 

  handleRemoveProduct(id) { 
    // 用filter返回新数组，保持不可变
    const newCart = this.state.cart.filter(product => product.id !== id); 
    this.setState({ cart: newCart }); 
    // 不用再调用sumTotalAmount，组件会自动重新渲染计算总金额
  } 

  handleChangeQuantity(e, id) { 
    const newCart = this.state.cart.map(product => { 
      if (product.id === id) { 
        // 返回新对象，不修改原product，遵循不可变原则
        return {
          ...product,
          quantity: e.target.value
        }; 
      } 
      return product; 
    }); 
    this.setState({ cart: newCart }); 
    // 同样不用调用sumTotalAmount
  } 

  // 新增计算总金额的方法，每次渲染时调用
  getTotalAmount() { 
    // 加上初始值0，避免cart为空时reduce报错
    return this.state.cart.reduce((total, product) => { 
      return total + Number(product.quantity) * Number(product.price); 
    }, 0); 
  } 

  render() { 
    return( 
      <div> 
        <div className="cart"> 
          {this.state.cart.map((item, index) => { 
            return( 
              <Product 
                key={index} 
                item={item} 
                handleRemoveProduct={this.handleRemoveProduct} 
                handleChangeQuantity={this.handleChangeQuantity} 
              /> 
            ) 
          })} 
        </div> 
        <div className="cart__total"> 
          Total amount - {this.getTotalAmount()} {/* 直接调用计算方法 */} 
        </div> 
      </div> 
    ) 
  } 
} 

const Product = (props) => ( 
  <div className="cart__product"> 
    {props.item.title} 
    <a href="#" onClick={(e) => {
      e.preventDefault(); // 阻止默认跳转行为
      props.handleRemoveProduct(props.item.id);
    }}>Remove</a> 
    <input 
      type="number" 
      name="quantity" 
      min="1" 
      max={props.item.left} 
      value={props.item.quantity} 
      onChange={(e) => props.handleChangeQuantity(e, props.item.id)}
    /> 
  </div> 
); 

ReactDOM.render(<App products={products} />, document.getElementById("root"));

关键修改说明 #

• 移除totalAmount状态：总金额是cart的派生值，不需要单独存储，每次渲染时计算更可靠。
• 遵循state不可变原则：修改cart时都返回新的数组/对象，避免直接修改原state数据，确保组件能正确触发重新渲染。
• 添加getTotalAmount方法：用reduce计算总金额，加上初始值0处理空购物车的情况。
• 移除sumTotalAmount调用：setState后组件会自动重新渲染，getTotalAmount会自动计算最新的总金额。
• 修复Remove链接的默认行为：添加e.preventDefault()，避免点击Remove时页面跳转。

这样修改后，不管是首次渲染、修改商品数量还是移除商品，总金额都会实时正确更新，而且代码更简洁易维护～

内容的提问来源于stack exchange，提问作者Ann Pavlov