使用 setState 更改整数未显示在渲染中答案

【问题标题】：Changing integer with setState not showing up in render使用 setState 更改整数未显示在渲染中
【发布时间】：2018-11-15 02:23:47
【问题描述】：

不幸的是，我无法找到解决此问题的方法，因此希望有人能在这里发现我做错了什么... 本质上，组件处理数据，动态创建 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

【问题讨论】：

标签： javascript reactjs components state increment

【解决方案1】：

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

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

【讨论】：