this.setState 没有改变状态

Question

我正在使用在状态下更改嵌套对象中的值的函数：

我在一个按钮中调用这些函数，当我点击那个按钮时它们被执行，但是其中一个函数不会改变状态

这是状态：

    state = {
        data: {
            attributesLength: this.props.product.attributes.length,
            modalMessage: "",
            isOpen: false,
        },
    };

这些是功能：

addToCart = (id) => {
        let data = { ...this.state.data };
        if (Object.keys(this.state).length === 1) {
            data.modalMessage = "Please, select product attributes";
            this.setState({ data});
            return;
        }
        if (
            Object.keys(this.state).length - 1 ===
            this.state.data.attributesLength
        ) {
            const attributes = Object.entries(this.state).filter(
                ([key, value]) => key !== "data"
            );
            if (this.props.cartProducts.length === 0) {
                this.props.addItem({
                    id: id,
                    quantity: 1,
                    attributes: Object.fromEntries(attributes),
                });
                data.modalMessage = "Added to cart !";
                this.setState({ data });
                return;
            }
            const product = this.props.cartProducts.filter((item) => item.id === id);
            if (product.length === 0) {
                this.props.addItem({
                    id: id,
                    quantity: 1,
                    attributes: Object.fromEntries(attributes),
                });
                data.modalMessage = "Added to cart !";
                this.setState({ data });
                return;
            }
            if (product.length !== 0) {
                this.props.changeQuantity({ id: id, case: "increase" });
                data.modalMessage = "Quantity increased !";
                this.setState({ data });
                return;
            }
            if (this.state.data.attributesLength === 0) {
                this.props.addItem({
                    id: id,
                    quantity: 1,
                    attributes: Object.fromEntries(attributes),
                });
                data.modalMessage = "Added to cart !";
                this.setState({ data });
                return;
            }
        } else {
            data.modalMessage = 'please, select "ALL" product attributes!';
            this.setState({ data });
        }
};


    changeModalBoolean = () => {
        let data = { ...this.state.data };
        data.isOpen = !data.isOpen;
        this.setState({ data });
    };

这就是我调用函数的地方：

                        <button
                            className={product.inStock ? null : "disabled"}
                            disabled={product.inStock ? false : true}
                            onClick={() => {
                                this.addToCart(product.id);
                                this.changeModalBoolean();
                            }}
                        >
                            {product.inStock ? "add to cart" : "out of stock"}
                        </button>

注意 changeModalBoolean 函数起作用并改变状态 isOpen 值，

Answer 1

   this.addToCart(product.id);
   this.changeModalBoolean();

这段代码一个接一个地同步运行。在每个函数中，您都创建了先前状态 let data = { ...this.state.data };

的副本

所以this.changeModalBoolean(); 只需替换您在this.addToCart(product.id); 中设置的状态即可解决此问题，请使用this.setState((state) => /*modify state*/)

  changeModalBoolean = () => {
    this.setState((state) => {
        let data = { ...state.data };
        data.isOpen = !data.isOpen;
        return { data };
    })
};

或在两个函数中修改同一个对象