Javascript 正在更改整数，设置状态未显示在渲染中

不幸的是，我还没有找到解决这个问题的办法，所以希望有人能发现我在这里做错了什么。。。 从本质上讲，组件处理数据，动态创建JSX，包括数量和一个带有plusOne（）函数的按钮。单击plusOne（）按钮时，这实际上会将数量增加1，但渲染中不会显示

任何关于我的代码的问题，我都乐意尝试并回答。谢谢你的阅读

import dummyData from './dummyData.json';



class Order extends Component {
    constructor(props) {
        super(props);
        this.state = {
            api: null
        };
        this.handleData = this.handleData.bind(this);
        this.findDescription = this.findDescription.bind(this);
        this.minusOne = this.minusOne.bind(this);
        this.plusOne = this.plusOne.bind(this);
    }
    componentDidMount() {
        axios.get(this.state.api)
            .then((res) => {
                this.handleData(res.data);
            })
            .catch((err) => {
                this.handleData(false);
            })
    }
    findDescription(productIds, data) {
        var product = [];
        for (let i = 0; i < productIds.length; i++) {
            for (let p = 0; p < data.products.length; p++) {
                if(data.products[p].id === productIds[i]) {
                    product.push(data.products[p]);
                }
            }
        }
        return product;
    }
    handleData(data) {
        if(!data) {
            data = dummyData;
        }
        console.log(data);
        let orderId = this.props.match.params.id;
        let grandTotal = data.orders[orderId-1].total;
        let item = data.orders[orderId-1].items;
        let productIds = [];
        for (let i = 0; i < item.length; i++) {
            productIds.push(item[i]['product-id']);
        }
        let product = this.findDescription(productIds, data);
        let singleOrderItems = [];
        this.setState({
            product,
            item
        }, () => {
            for (let i = 0; i < this.state.item.length; i++) {
                singleOrderItems.push(
                    <div key={i} className="single-order-container">
                        <ul>
                            <li>{this.state.product[i].description}</li>
                            <li>Quantity: {this.state.item[i].quantity}</li>
                            <li>Price per Item: {this.state.item[i]["unit-price"]}</li>
                            <li>Total: {this.state.item[i].total}</li>
                            <button onClick={this.minusOne(i)} name="minus">-</button>
                            <button onClick={this.plusOne(i)} name="plus">+</button>

                        </ul>
                    </div>
                )
            }
        })
        this.setState({
            singleOrderItems,
            grandTotal
        })
    }
    minusOne(i) {
        var self = this;
        return function() {
            console.log(self.state.item);
        }
    }
    plusOne(i) {
        var self = this;
        return function() {
            let quantity = self.state.item[i].quantity ++;
            self.setState({
                quantity
            });
        }
    }
    render() {
        return(
            <div>
                <div>Order {this.props.match.params.id} </div>
                {this.state.singleOrderItems}
                <div>Grand Total: {this.state.grandTotal}</div>
            </div>
        )
    }
}

export default Order

从“./dummyData.json”导入dummyData；
类顺序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
api:null
};
this.handleData=this.handleData.bind（this）；
this.findDescription=this.findDescription.bind（this）；
this.minusOne=this.minusOne.bind（this）；
this.plusOne=this.plusOne.bind（this）；
}
componentDidMount（）{
get（this.state.api）
。然后（（res）=>{
这是handleData（res.data）；
})
.catch（（错误）=>{
这是handleData（假）；
})
}
findDescription（产品ID、数据）{
var乘积=[]；
for（设i=0；i {
for（设i=0；i
{this.state.product[i].description}
数量：{this.state.item[i].Quantity}
每项价格：{this.state.Item[i][“单价”]}
总计：{this.state.item[i].Total}
-
+

)
}
})
这是我的国家({
单个订单项，
总计
})
}
一（一）{
var self=这个；
返回函数（）{
日志（self.state.item）；
}
}
普鲁松（一）{
var self=这个；
返回函数（）{
设数量=self.state.item[i].数量++；
自我状态({
量
});
}
}
render（）{
返回(
顺序{this.props.match.params.id}
{this.state.singleOrderItems}
总计：{this.state.grandTotal}
)
}
}
导出默认订单

状态确实发生了变化，内容只是没有以正确的状态呈现，因为最初创建的Components数组发生在componentDidMount中的promise中

也许您可以将响应数据存储在您的状态中，并在呈现时创建内容（或其他生命周期方法）