Question

我正在尝试使用从商店收到的新道具重新呈现我的React组件，但道具似乎没有得到更新。这种方法通常适用于我，只是在这种情况下它没有。

组件

class Cart extends React.Component {

    static getStores() {
        return [CartStore];
    }

    static getPropsFromStores() {
        return CartStore.getState();
    }

    componentDidMount() { // tried componentWillMount also
        CartActions.updateCart();
    }

    render() {
        console.log(this.props.cart); // empty object

        return (
            <div className="cart">
                {this.props.cart.map((item, i) => <div key={i}>{item.get('name')}</div>)}
            </div>
        );
    }

}

export default connectToStores(Cart);

操作

class CartActions {

    updateCart() {
        this.dispatch();
    }

}

export default alt.createActions(CartActions);

商品

class CartStore {

    constructor() {
        this.bindActions(CartActions);

        this.cart = Immutable.fromJS([]);
    }

    updateCart() {
        this.cart = Immutable.fromJS(JSON.parse(localStore.getItem('cart')));
        console.debug('cart', this.cart); // returns the correct object
    }

}

export default alt.createStore(CartStore, 'CartStore');

商店接收action事件并从localStorage中检索正确的对象。但是，组件的道具不会像通常那样更新。

任何帮助表示赞赏！谢谢:)）

版本

反应0.14.3
alt.js 0.17.9

Answer 1

您需要在视图中的某个位置收听您的商店，通常是componentDidMount，如果您要从商店中重新发送内容并且它会发生变化，它应该来自更高阶的组件或者只是变成一个状态。在这种情况下，状态变量更适合。

所以，这样的事情会起作用

componentDidMount () {
  CartStore.listen(this.onChange)
  CartActions.updateCart()
}

onChange () {
  this.setState({
    xxx: xxxx
  }) // or change props like yours if you insist 
}

render() {
    return (
        <div className="cart">
            {this.state.cart.map((item, i) => <div key={i}>{item.get('name')}</div>)}
        </div>
    );
}

Flux / Alt不从商店更新道具

1 个答案: