使用setState更改整数不会显示在渲染中

Question

不幸的是我还没有找到解决这个问题的方法所以希望有人可以发现我在这里做错了什么...基本上组件处理Data，动态创建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

Answer 1

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

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