Question

我知道这似乎是重复的，我已经阅读了类似的问题和答案。但是，在使父组件及其状态与子组件同步方面仍然存在问题。即使在控制台中，它也仅落后一步。

父组件App.js

changeItemQuantity = (id, newQuantity) => {
        this.setState(prevState => ({
            cartData: {
                ...prevState.cartData,
                items: this.state.cartData.items.map(item => {
                    if (String(item.productData.productId) === String(id)) {
                        item.productQuantity = newQuantity
                    }
                    return item
                })
            }
        }))

        // console.log(id, newQuantity);
        // console.log(this.state.cartData)
    }

子组件Cart.js

import React, { Component } from 'react';

class Cart extends Component {
    constructor(props) {
        super(props);

        this.state = {
            newQuantity: 1
        }
    }

    handleQuantityChange = (e) => {
        this.setState({
            newQuantity: e.target.value
        })

        this.props.changeItemQuantity(e.target.id, this.state.newQuantity);
    }

    render() {
        return (
            <div className="cart-list">
                {this.props.cartData.items.map(item => {
                    return (
                        <div className="cart-item" key={item.productData.productId}>
                            <div className={`cart-item-image ${item.productData.productImage}`}></div>

                            <div className="cart-item-data">
                                <div className="cart-item-name">{item.productData.productName}</div>
                                <div className="cart-item-s-q">( {item.productSize} ) x <input type="text" id={item.productData.productId} onChange={this.handleQuantityChange} className="cart-field change-q" placeholder={item.productQuantity}/></div>
                                <div className="cart-item-total">Total : ${(parseInt(item.productData.productPrice) * parseInt(item.productQuantity)).toFixed(2)}</div>
                            </div>
                        </div>
                    )
                })}
            </div>
        )
    }
}

export default Cart;

基本上，我要完成的工作是能够进入我的ecom网站的购物车页面内，并可以调整每件商品的数量（该商品位于父母身分内）。我已经知道了，但是当我进行调整时，控制台内部和屏幕上的状态不是最新的。我试过使用像这样的回调函数

handleQuantityChange = (e) => {
        this.setState({
            newQuantity: e.target.value
        }, this.props.changeItemQuantity(e.target.id, this.state.newQuantity);)

    }

但这对我没有任何帮助。我还尝试过在Parent组件内部使用回调，例如...

 changeItemQuantity = (id, newQuantity) => {
        this.setState(prevState => ({
            cartData: {
                ...prevState.cartData,
                items: this.state.cartData.items.map(item => {
                    if (String(item.productData.productId) === String(id)) {
                        item.productQuantity = newQuantity
                    }
                    return item
                })
            }
        }), console.log(this.state.cartData))

    }

但同样，什么也没有。你们觉得我能做什么？预先感谢！

反应状态落后一步（不可重复！）

0 个答案: