在 onclick 中调用函数后 React.js 不增加

如何解决在 onclick 中调用函数后 React.js 不增加

我需要建立一个表格来组织一些数据。我正在使用“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
                },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"))

解决方法

我会为该行创建一个单独的组件，以便您可以轻松更新该组件以增加状态中的 import 'package:cloud_firestore/cloud_firestore.dart'; import 'package:flutter/material.dart'; import 'package:ml_app/widgets/shared/loading.dart'; class TodaysReviewScreen2 extends StatefulWidget { @override _TodaysReviewScreen2State createState() => _TodaysReviewScreen2State(); } class _TodaysReviewScreen2State extends State<TodaysReviewScreen2> { @override Widget build(BuildContext context) { return StreamBuilder( stream: FirebaseFirestore.instance.collection('entries').snapshots(),builder: (ctx,snapshot) { if (snapshot.connectionState == ConnectionState.waiting) { return Loading(); } return ListView( padding: const EdgeInsets.all(8),children: <Widget>[ Container( child: Column(children:[ ...snapshot.data.docs.map<Widget>((e) => Text('${e['title']}')).toList(),]),),],); },); } } 值：

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
                },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> 属性。单独的组件更容易。

,

   handleClick(e){
      const index = Number(e.currentTarget.value);
      this.setState(this.state.cars.map(car,i)=> {
        return i === index ? {...car,stock: car.stock + 1}: car 
      })
   }
 
   renderRow(){
    ....
       <input type="button" onClick={this.handleClick} value={index} />
    ...
   }