this.setState沒有改變狀態

我正在使用在狀態下更改嵌套物件中的值的函式：

我在一個按鈕中呼叫這些函式，當我單擊該按鈕時它們被執行，但是其中一個函式不會更改狀態

這是狀態：

    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 值，

uj5u.com熱心網友回復：

   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 };
    })
};

或在兩個函式中修改同一個物件

標籤：

上一篇：如何將一組html標簽添加到jsx

下一篇：從用戶腳本中選擇由反應生成的動態類名？