javascript - 为什么状态更新自己？不调用 setState

Question

我是 React 的初学者。面临一个问题不知道为什么。 让一系列产品进入 react 状态。

当用户单击按钮(通过子组件)时，我从状态克隆当前产品数组，然后对其进行修改，但状态正在更新而不调用 setState。 帮助真的很感激。我想知道为什么它会这样。

App组件文件如下:

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            products: [
                {
                    id: 1,
                    img: 'http://placehold.it/460x250/e67e22/ffffff&text=HTML5',
                    title: 'Laptop',
                    quantity: 1,
                    price: 250,
                },
            ],
            cart_products: [],
            total_price: 0,
            total_product: 0,
        };
    }

    addProductToCart = (id) => {
        let cartProducts = [];
        // Trying to clone first
        let productCopy = [...this.state.products];

        // Find specific product
        let newProduct = productCopy.find((item) => {
            return item.id === id;
        });

        // Now into new product I want to add some extra property
        newProduct['originalPrice'] = newProduct.price;

        // Here I want some other code.
        cartProducts.push(newProduct);

        this.setState({
            cart_products: cartProducts
        });
    }

    render() {
        return (
            <div className="container-fluid">
                <div className="container">
                    <h1 className="text-center">React.js Example </h1>
                </div>
                <div>
                    <div className="col-sm-6">
                        <Cart products={this.state.cart_products} totalPrice={this.state.total_price} totalProduct={this.state.total_product} />
                    </div>
                    <div className="col-sm-6">
                        <Products products={this.state.products} onClicked={this.addProductToCart} />
                    </div>
                </div>
            </div>
        );
    }
}

问题是“products”数组进入状态自动更新。这是 React Chrome 扩展的图片

方法调用前

方法调用后:

应用的想法只是简单的购物车系统。当用户单击添加产品按钮时，我想将特定产品添加到购物车中。但我不知道如何解决这个问题。

Answer 1

我可以在行中看到一些问题

let productCopy = [...this.state.products];

只需将这一行替换为，

let productCopy = JSON.parse(JSON.stringify([...this.state.products]))

为什么需要它？

这就是展开运算符在复制复数变量时的工作方式。 这是 reference它说，

Note: Spread syntax effectively goes one level deep while copying an array. Therefore, it may be unsuitable for copying multidimensional arrays as the following example shows (it's the same with Object.assign() and spread syntax).