1

我在 MobX 中有一个商店，它处理包含购物车，并向其中添加物品。但是，当该数据更新时，组件不会重新渲染以适应更改。我尝试使用useEffect来设置总价，但是当cartData更改时，状态不会更新。不过，它确实适用于安装。

在另一个组件中，我调用addItemToCart了 ，console.warn 函数返回了正确的数据——但该数据似乎没有同步到组件。clearCart似乎也不起作用。

我的商店包含在一个 RootStore 中。

import React, {useState, useEffect} from 'react';
import {List, Text} from '@ui-kitten/components';
import {CartItem} from '_molecules/CartItem';
import {inject, observer} from 'mobx-react';

const CartList = (props) => {
    const {cartData} = props.store.cartStore;
    const [totalPrice, setTotalPrice] = useState(0);

    const renderCartItem = ({item, index}) => (
        <CartItem itemData={item} key={index} />
    );

    useEffect(() => {
        setTotalPrice(cartData.reduce((a, v) => a + v.price * v.quantity, 0));
        console.warn('cart changed!');
    }, [cartData]);

    return (
        <>
            <List
                data={cartData}
                renderItem={renderCartItem}
                style={{backgroundColor: null, width: '100%'}}
            />
            <Text style={{textAlign: 'right'}} category={'s1'}>
                {`Total $${totalPrice}`}
            </Text>
        </>
    );
};

export default inject('store')(observer(CartList));

import {decorate, observable, action} from 'mobx';

class CartStore {
    cartData = [];

    addItemToCart = (itemData) => {
        this.cartData.push({
            title: itemData.title,
            price: itemData.price,
            quantity: 1,
            id: itemData.id,
        });
        console.warn(this.cartData);
    };

    clearCart = () => {
        this.cartData = [];
    };

}


decorate(CartStore, {
    cartData: observable,
    addItemToCart: action,
    clearCart: action,
});

export default new CartStore();
4

1 回答 1

0

我已经解决了这个问题，将我的addItemToCart操作替换CartStore为：

    addItemToCart = (itemData) => {
        this.cartData = [
            ...this.cartData,
            {
                title: itemData.title,
                price: itemData.price,
                quantity: 1,
                id: itemData.id,
            },
        ];
        console.warn(this.cartData);
    };
于 2020-07-01T10:32:40.937 回答