React项目中JSON初始值与配料价格累加异常问题求助

你遇到的问题是系统启动时没正确加载餐品初始价格，添加配料时也没把初始价格作为计算基础，导致最终价格只累加了配料费用，缺少餐品本身的价格。咱们一步步来修复这个问题：

先分析代码里的问题点 #

1. handleAdd函数参数接收错误：你调用handleAdd时传了三个参数（事件对象、配料价格、餐品初始价格），但函数定义只接收前两个，餐品初始价格根本没被用到。
2. 全局totalPrice初始化缺失：组件启动时没把餐品初始价格设为totalPrice的初始值，导致计算从0开始累加配料价格。
3. 多餐品场景下状态冲突：如果页面展示多个餐品，当前全局的totalPrice会让所有餐品显示同一个价格，显然不符合需求。

解决方案 #

场景1：页面只展示单个餐品 #

如果你的页面只需要处理一个餐品，可以按以下步骤修复：

1. 初始化餐品初始价格：在组件挂载时，把餐品初始价格设为totalPrice的初始值，同时新增状态存储已选配料价格，方便后续准确计算总价：

// 在组件的state中添加selectedIngredients
state = {
  lanches: [],
  ingredientes: [],
  totalPrice: 0,
  editItem: false,
  selectedIngredients: [] // 存储已选配料的价格
};

// 组件挂载时初始化totalPrice
componentDidMount() {
  // 假设lanches数组中至少有一个餐品数据
  if (this.state.lanches.length > 0) {
    this.setState({ totalPrice: this.state.lanches[0].price });
  }
}

2. 修复handleAdd函数：正确接收餐品初始价格，基于初始价格+已选配料总价计算最终价格：

handleAdd = (e, value_ingrediente, lanchePrice) => {
  // 将当前配料价格加入已选列表
  const updatedSelected = [...this.state.selectedIngredients, value_ingrediente];
  // 计算总价：餐品初始价格 + 所有已选配料价格之和
  const finalPrice = lanchePrice + updatedSelected.reduce((sum, price) => sum + price, 0);
  
  this.setState({
    selectedIngredients: updatedSelected,
    totalPrice: finalPrice
  });
};

场景2：页面展示多个餐品（更通用的方案） #

如果页面需要处理多个餐品，每个餐品价格需要独立计算，就不能用全局的totalPrice了，要给每个餐品维护自己的状态：

1. 初始化餐品状态：在组件挂载时，给每个餐品添加独立的已选配料列表和当前价格：

componentDidMount() {
  // 假设你从JSON接口获取到lanches数据
  const fetchedLanches = /* 你的JSON数据 */;
  // 给每个餐品扩展状态字段
  const lanchesWithState = fetchedLanches.map(lanche => ({
    ...lanche,
    selectedIngredients: [], // 当前餐品的已选配料价格
    currentPrice: lanche.price // 当前餐品的实时价格，初始为餐品原价
  }));
  
  this.setState({ lanches: lanchesWithState });
}

2. 修改渲染代码：每个餐品展示自己的currentPrice，而不是全局的totalPrice：

{this.state.lanches.map(lanche => ( 
  <div className="item" key={lanche.id}> 
    <div className="item__desc--top"> 
      <h2 className="item__title">{lanche.name}</h2> 
      {/* 改为显示餐品自己的currentPrice */}
      <p className="item__price">{lanche.currentPrice}</p> 
    </div> 
    {/* 其余渲染代码不变 */}
    <ul className="item__ingredientes"> 
      {lanche.ingredients.map(ingredientes => <li className="item__ingredientes--itens" key={ingredientes}> 
        <span>{ingredientes}</span> 
        { this.state.editItem ? <button className="actionRemove"><i className="fa fa-times"></i></button> : null} 
      </li> )} 
    </ul> 
    <p className="itens__adicionais">Add Items</p> 
    <ul className="itens__adicionais--menu"> 
      {this.state.ingredientes.map(ingrediente => <li className="itens__adicionais--item" key={ingrediente.id}> 
        <span>{ingrediente.name}</span> 
        {/* 传递餐品id，用于定位要更新的餐品 */}
        <button className="actionAdd" onClick={((e) => this.handleAdd(e, ingrediente.price, lanche.id))}><i className="fa fa-plus"></i></button> 
      </li> )} 
    </ul> 
  </div> 
))}

3. 更新handleAdd函数：根据餐品id找到对应的餐品，更新它的已选配料和实时价格：

handleAdd = (e, value_ingrediente, lancheId) => {
  this.setState(prevState => {
    // 遍历餐品列表，找到要更新的餐品
    const updatedLanches = prevState.lanches.map(lanche => {
      if (lanche.id === lancheId) {
        const updatedSelected = [...lanche.selectedIngredients, value_ingrediente];
        // 重新计算当前餐品的价格
        const newCurrentPrice = lanche.price + updatedSelected.reduce((sum, price) => sum + price, 0);
        
        return {
          ...lanche,
          selectedIngredients: updatedSelected,
          currentPrice: newCurrentPrice
        };
      }
      // 其他餐品保持不变
      return lanche;
    });
    
    return { lanches: updatedLanches };
  });
};

这样每个餐品的价格都会独立计算，不会互相干扰，而且能正确结合餐品初始价格和配料价格。

内容的提问来源于stack exchange，提问作者Gustavo Chagas