React表格增减按钮实现：如何实现每行库存字段的增减功能

核心问题分析 #

你点击按钮没效果，大概率是没有把汽车数据存在组件的state里，或者修改数据时没有遵循React的不可变更新规则（直接修改原数据，React检测不到变化，不会触发渲染）。

完整可运行代码示例（函数组件） #

假设你的汽车数据是数组格式，下面是函数组件的实现：

import { useState } from 'react';

function CarInventoryTable() {
  // 将汽车数据存入state，确保数据变更能触发组件重渲染
  const [cars, setCars] = useState([
    { id: 1, name: '特斯拉Model 3', stock: 5 },
    { id: 2, name: '比亚迪汉', stock: 3 },
    { id: 3, name: '大众ID.4', stock: 0 },
  ]);

  // 增加库存：通过id定位目标车辆，返回新数组更新state
  const incrementStock = (carId) => {
    setCars(prevCars => 
      prevCars.map(car => 
        car.id === carId ? { ...car, stock: car.stock + 1 } : car
      )
    );
  };

  // 减少库存：限制库存不低于0，同样返回新数组更新state
  const decrementStock = (carId) => {
    setCars(prevCars => 
      prevCars.map(car => 
        car.id === carId && car.stock > 0 ? { ...car, stock: car.stock - 1 } : car
      )
    );
  };

  return (
    <table border="1" style={{ borderCollapse: 'collapse', margin: '20px' }}>
      <thead>
        <tr>
          <th style={{ padding: '8px', border: '1px solid #ccc' }}>车型</th>
          <th style={{ padding: '8px', border: '1px solid #ccc' }}>库存</th>
          <th style={{ padding: '8px', border: '1px solid #ccc' }}>操作</th>
        </tr>
      </thead>
      <tbody>
        {cars.map(car => (
          <tr key={car.id}>
            <td style={{ padding: '8px', border: '1px solid #ccc' }}>{car.name}</td>
            <td style={{ padding: '8px', border: '1px solid #ccc' }}>{car.stock}</td>
            <td style={{ padding: '8px', border: '1px solid #ccc' }}>
              <button 
                onClick={() => decrementStock(car.id)} 
                disabled={car.stock === 0}
                style={{ marginRight: '8px', padding: '4px 8px' }}
              >-</button>
              <button 
                onClick={() => incrementStock(car.id)}
                style={{ padding: '4px 8px' }}
              >+</button>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default CarInventoryTable;

关键注意事项 #

• 必须用state管理动态数据：如果之前是用静态变量（比如const cars = [...]）存储数据，修改后组件不会重渲染，必须将数据移入useState。
• 不可变更新原则：永远不要直接修改state中的原数组/对象（比如car.stock +=1），必须通过map、扩展运算符...创建新的数组/对象，React才能检测到数据变化。
• 正确绑定点击事件：按钮的onClick要传递一个函数，不能直接执行（比如不要写onClick={decrementStock(car.id)}，这会在组件渲染时就执行函数，而不是点击时），要写成onClick={() => decrementStock(car.id)}。
• 库存边界控制：减少库存时判断car.stock > 0，同时给减少按钮加disabled属性，避免出现负数库存。

类组件版本（如果你用的是类组件） #

import React, { Component } from 'react';

class CarInventoryTable extends Component {
  state = {
    cars: [
      { id: 1, name: '特斯拉Model 3', stock: 5 },
      { id: 2, name: '比亚迪汉', stock: 3 },
      { id: 3, name: '大众ID.4', stock: 0 },
    ]
  };

  incrementStock = (carId) => {
    this.setState(prevState => ({
      cars: prevState.cars.map(car => 
        car.id === carId ? { ...car, stock: car.stock + 1 } : car
      )
    }));
  };

  decrementStock = (carId) => {
    this.setState(prevState => ({
      cars: prevState.cars.map(car => 
        car.id === carId && car.stock > 0 ? { ...car, stock: car.stock - 1 } : car
      )
    }));
  };

  render() {
    const { cars } = this.state;
    return (
      <table border="1" style={{ borderCollapse: 'collapse', margin: '20px' }}>
        <thead>
          <tr>
            <th style={{ padding: '8px', border: '1px solid #ccc' }}>车型</th>
            <th style={{ padding: '8px', border: '1px solid #ccc' }}>库存</th>
            <th style={{ padding: '8px', border: '1px solid #ccc' }}>操作</th>
          </tr>
        </thead>
        <tbody>
          {cars.map(car => (
            <tr key={car.id}>
              <td style={{ padding: '8px', border: '1px solid #ccc' }}>{car.name}</td>
              <td style={{ padding: '8px', border: '1px solid #ccc' }}>{car.stock}</td>
              <td style={{ padding: '8px', border: '1px solid #ccc' }}>
                <button 
                  onClick={() => this.decrementStock(car.id)} 
                  disabled={car.stock === 0}
                  style={{ marginRight: '8px', padding: '4px 8px' }}
                >-</button>
                <button 
                  onClick={() => this.incrementStock(car.id)}
                  style={{ padding: '4px 8px' }}
                >+</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

export default CarInventoryTable;

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