我需要建立一个表格来组织一些数据。我正在使用“onclick”函数来调用一个单独的函数,该函数应该将状态变量加一。我的 Chrome Devtools 没有给我任何错误,但也没有更新 stock 变量。我不确定如何让状态更新和显示。这是我的源代码:
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
                },
    
            ]
        };
        this.renderCar = this.renderRow.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        this.setState(() => {
            return {stock: this.stock + 1}
        })
    }
    renderRow(car, index) {
        return (
            <tr key={index}>
                <td key={car.manufacturer}>{car.manufacturer}</td>
                <td key={car.model}>{car.model}</td>
                <td key={car.year}>{car.year}</td>
                <td key={car.stock}>{car.stock}</td>
                <td key={car.price}>${car.price}.00</td>
                <td key={index}><input type="button" onClick={car.handleClick} value="Increment" /></td>
            </tr>
        )
    }
    render() {
        return (
            <div>
            <table>
                <thead>
                <tr>
                    <th>Manufacturer</th>
                    <th>Model</th>
                    <th>Year</th>
                    <th>Stock</th>
                    <th>Price</th>
                    <th>Option</th>
                </tr>
                </thead>
                <tbody>
                    {this.state.cars.map(this.renderRow)}
                </tbody>
            </table>
            </div>
        );
    };
}
ReactDOM.render(<App />, document.getElementById("app"))