在onclick中调用函数后，React.js不会递增 [英] React.js not incrementing after function call in onclick

问题描述

我需要构建一个表以组织一些数据.我正在使用"onclick"为了调用一个单独的函数，该函数应该将状态变量增加一个.我的Chrome Devtools没有给我任何错误，但是也没有更新stock变量.我不确定如何获取状态来更新和显示.这是我的源代码:

I need to build a table in order to organize some data. I'm using the "onclick" function in order to call a separate function, which is supposed to increment a state variable up by one. My Chrome Devtools isn't giving me any errors but also isn't updating the stock variable. I'm not sure how to get the state to update and display. Here's my source code:

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"))

推荐答案

我将为该行创建一个单独的组件，以便您可以轻松更新该组件以增加状态中的 stock 值:

I'd make a separate component for the row, so that you can easily update that component to increment the stock value in state:

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
                },
    
            ]
        };
    }


    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(
                      (car, i) => <Row car={car} key={i} />
                    )}
                </tbody>
            </table>
            </div>
        );
    };
}
const Row = ({ car }) => {
  const [stock, setStock] = React.useState(car.stock);
  return (
      <tr>
          <td>{car.manufacturer}</td>
          <td>{car.model}</td>
          <td>{car.year}</td>
          <td>{stock}</td>
          <td>${car.price}.00</td>
          <td><input type="button" onClick={() => setStock(stock + 1)} value="Increment" /></td>
      </tr>
  );
}

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

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id='app'></div>

如果需要的话，您可以将它们全部放在一个组件中，但这有点麻烦.渲染时，您必须跟踪行的渲染索引，并将其传递给单击处理程序，然后在该索引处不变地更新状态数组中的 stock 属性.单独的组件更容易.

You could put it all in one component if you had to, but it'd be a bit cumbersome. While rendering, you'd have to keep track of the render index of a row and pass that along to the click handler, then immutably update the stock property in the state array at that index. A separate component is easier.

这篇关于在onclick中调用函数后，React.js不会递增的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！