Question

问题如下：

我在一系列回调中得到了一个监听器。它们看起来像这样：

static listeners = [];

它们位于添加和删除数组项的js文件中。

static items = [];
static listeners = [];

static add(item) {
    this.items.push(item);
    this.listeners.forEach((callback) => callback());
};

static remove(item) {
    var index = this.items.indexOf(item);
    this.items.splice(index, 1);
    this.listeners.forEach((callback) => callback());

};

static register(callback) {
    this.listeners.push(callback);
};

我想让一个组件知道数组何时发生变化，并通过设置状态来重新渲染。

constructor() {
    super();

    this.state = {
        items: ShoppingCartStore.items
    };
}

componentWillMount(){
    ShoppingCartStore.register(this.refresh.bind(this));
}

componentWillUnmount(){
    ShoppingCartStore.removeEventListener(?, ?);
}

refresh() {
    this.setState({items: ShoppingCartStore.items})
}

render() {
    return (
        <div>
            <h1>Shopping Cart</h1>
            <table className="pure-table">
                <thead>
                    <tr>
                        <td>No</td>
                        <td>Item</td>
                        <td>Size</td>
                        <td>Price</td>
                        <td></td>
                    </tr>
                </thead>
                <tbody>
                    {this.state.items.map((item, i) => <ShoppingCartRow key={i} index={i} item={item}/>) }
                    <ShoppingCartSumRow />
                </tbody>
            </table>
        </div>
    );
}

其他组件也会听取这一系列的听众我怎样才能找出哪些听众应该取消注册？我必须取消注册监听器，因为我想返回到客户选择项目的主页面，并且反应不能在未安装的组件上设置。感谢您的任何意见，我为我糟糕的英语道歉

Answer 1

您可以保留对传递给寄存器的回调函数的引用：

var callbackReference;
componentWillMount(){
     callbackReference = this.refresh.bind(this);
     ShoppingCartStore.register(callbackReference);
}

然后，您可以像这样编写removeEventListener函数：

static removeEventListener(reference){
    var index = this.listeners.indexOf(reference);
    if(index != -1){
        this.listeners.splice(index, 1);
    }
}

以下是您将如何称呼它：

componentWillUnmount(){
    ShoppingCartStore.removeEventListener(callbackReference);
}

我如何找到，取消注册的听众？

1 个答案: