React表格中实现Stock字段增减按钮的问题排查

核心错误点 #

• 增减函数未定位目标行：this.state.cars是数组，this.state.cars.stock不存在，且未传递当前行的车辆标识，无法确定要修改哪条数据。
• 违反React状态不可变原则：直接修改原数组/对象，React无法感知状态更新，导致视图不刷新。
• Decrement函数逻辑错误：decreaseStock方法内写的是+1，与功能需求相反。
• 事件绑定未传参数：点击按钮时未传递当前车辆的唯一标识，处理函数无法定位修改目标。

修正后的完整代码 #

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cars: [
        {
          "manufacturer": "Toyota",
          "model": "Rav4",
          "year": 2008,
          "stock": 3,
          "price": 8500
        },
        {
          "manufacturer": "Toyota",
          "model": "Camry",
          "year": 2009,
          "stock": 2,
          "price": 6500
        },
        {
          "manufacturer": "Toyota",
          "model": "Tacoma",
          "year": 2016,
          "stock": 1,
          "price": 22000
        },
        {
          "manufacturer": "BMW",
          "model": "i3",
          "year": 2012,
          "stock": 5,
          "price": 12000
        },
        {
          "manufacturer": "Chevy",
          "model": "Malibu",
          "year": 2015,
          "stock": 2,
          "price": 10000
        },
        {
          "manufacturer": "Honda",
          "model": "Accord",
          "year": 2013,
          "stock": 1,
          "price": 9000
        },
        {
          "manufacturer": "Hyundai",
          "model": "Elantra",
          "year": 2013,
          "stock": 2,
          "price": 7000
        },
        {
          "manufacturer": "Chevy",
          "model": "Cruze",
          "year": 2012,
          "stock": 2,
          "price": 5500
        },
        {
          "manufacturer": "Dodge",
          "model": "Charger",
          "year": 2013,
          "stock": 2,
          "price": 16000
        },
        {
          "manufacturer": "Ford",
          "model": "Mustang",
          "year": 2009,
          "stock": 1,
          "price": 8000
        },
      ]
    };
    // 提前绑定this，避免每次render重复绑定
    this.increaseStock = this.increaseStock.bind(this);
    this.decreaseStock = this.decreaseStock.bind(this);
  }
  
  onHeaderClick(){
   
  }

  increaseStock(model){
    // 遵循不可变原则，基于prevState创建新数组
    this.setState(prevState => ({
      cars: prevState.cars.map(car => {
        if(car.model === model){
          // 返回新对象修改stock值
          return {...car, stock: car.stock + 1}
        }
        return car;
      })
    }))
  }

  decreaseStock(model){
    this.setState(prevState => ({
      cars: prevState.cars.map(car => {
        if(car.model === model){
          // 确保库存不会小于0
          return {...car, stock: Math.max(car.stock - 1, 0)}
        }
        return car;
      })
    }))         
  }

  render() {
    return (
      <table>
        <tr>
          <th>Manufacturer</th>
          <th>Model</th>
          <th onClick={()=> this.onHeaderClick()}>Year</th>
          <th>Stock</th>
          <th>Price</th>
          <th>Options</th>
          <th></th>
        </tr>
        {
          this.state.cars.map(car => (
            <tr key={car.model}>
              <td>{car.manufacturer}</td>
              <td>{car.model}</td>
              <td>{car.year}</td>
              <td>{car.stock}</td>
              <td>${car.price}.00</td>
              {/* 传递当前行的model作为唯一标识 */}
              <td><button type="button" onClick={() => this.increaseStock(car.model)}>Increment</button></td>
              <td><button type="button" onClick={() => this.decreaseStock(car.model)}>Decrement</button></td>
            </tr>
          ))
        }
      </table>
    );
  };
}

ReactDOM.render(<App />, document.getElementById("app"))

关键修正说明 #

• 在按钮点击事件中传递当前车辆的model作为唯一标识，让处理函数精准定位要修改的行。
• 使用setState的函数式更新，基于prevState创建新数组和对象，遵循不可变原则，确保React能检测到状态变化并触发视图更新。
• 修复decreaseStock的逻辑错误，新增Math.max限制库存最小值为0，避免出现负数库存。
• 在constructor中提前绑定函数的this，减少render时的重复绑定操作，优化性能。

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