React中如何通过递增函数更新指定索引车辆的库存数？

关于setState调用后组件是否重渲染 #

是的，调用setState会触发组件重渲染。这是React的核心机制：当组件state发生变更时，React会重新执行render方法，将更新后的UI同步到页面，确保视图与数据一致。

实现指定索引车辆库存递增的具体方案 #

你的代码需要修正两处关键问题，同时完成库存递增逻辑：

1. 修正按钮点击事件的绑定方式 #

当前代码里onClick={this.increment(0)}会在组件渲染时立即执行increment函数，而非点击按钮时触发。可以改成两种方式：

• 用箭头函数包裹：onClick={() => this.increment(0)}
• 在constructor中绑定this（性能更优）：

  constructor(props) {
      super(props);
      // 原有state代码保留
      this.increment = this.increment.bind(this);
  }
  

2. 实现increment函数的setState逻辑 #

React要求不能直接修改state中的数据（遵循不可变性原则），需要创建原数组的副本，修改对应元素后再更新state：

increment(index) {
    // 复制原cars数组，避免直接修改原state
    const updatedCars = [...this.state.cars];
    // 复制目标车辆对象，更新库存值
    updatedCars[index] = {
        ...updatedCars[index],
        stock: updatedCars[index].stock + 1
    };
    // 更新state
    this.setState({ cars: updatedCars });
}

完整修正后的代码 #

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
                }
            ]
        };
        // 绑定this到increment方法
        this.increment = this.increment.bind(this);
    }

    increment(index) {
        const updatedCars = [...this.state.cars];
        updatedCars[index] = {
            ...updatedCars[index],
            stock: updatedCars[index].stock + 1
        };
        this.setState({ cars: updatedCars });
    }

    render() {
        return (
            <table>
                <tr>
                    <th>manufacturer</th>
                    <th>model</th>
                    <th>year</th>
                    <th>stock</th>
                    <th>price</th>
                    <th>option</th>
                </tr>
                {this.state.cars.map((car, index) => (
                    <tr key={index}>
                        <td>{car.manufacturer}</td>
                        <td>{car.model}</td>
                        <td>{car.year}</td>
                        <td>{car.stock}</td>
                        <td>${car.price}.00</td>
                        <td>
                            <button onClick={() => this.increment(index)}>Increment</button>
                        </td>
                        <td>
                            <button>Decrement</button>
                        </td>
                    </tr>
                ))}
            </table>
        );
    }
}

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

注：我把车辆渲染逻辑改成了map循环，避免重复代码，后续添加车辆无需手动修改render部分。

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