Изменение целого числа с помощью setState не отображается при рендеринге - PullRequest
Новая
       18

Изменение целого числа с помощью setState не отображается при рендеринге

0 голосов
/ 05 июня 2018

К сожалению, я не смог найти решение этой проблемы, так что, надеюсь, кто-то может заметить, что я здесь делаю неправильно ... По сути, компонент обрабатывает данные, динамически создавая 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

1 Ответ

0 голосов
/ 05 июня 2018

Состояние действительно меняется, содержимое просто не отображается с правильным состоянием, потому что первоначальное создание массива Components происходит в обещании в вашем componentDidMount.

Возможно, вы могли бы сохранить свои данные ответа вваше состояние и создание контента при рендеринге (или другом методе жизненного цикла)

...