MobX 可观察到的变化不更新组件

Question

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

在另一个组件中，我调用 addItemToCart 和 console.warn 函数 returns 正确的数据 - 但该数据似乎没有同步到组件。 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();

Answer 1

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

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

MobX 可观察到的变化不更新组件

MobX observable changes not updating components

react-native

mobx

mobx-react

react-native-ui-kitten