Question

我有一个项目列表。通过传递public abstract class EmployeeBase{} public class Employee: EmployeeBase{} class SomeClass { public EmployeeBase Employee { get; set; } SomeClass() { Employee = new Employee(); // OOP in play :) Employee = new EmployeeBase(); // Error CS0144 // Cannot create an instance of the abstract class or interface 'EmployeeBase' } }，每个项目都可以在MyComponent中显示。要收听所选项目的更改，我已通过itemId：

myService

组件获取项目详细信息并开始收听服务：

<MyComponent myService={myService} id={itemId}/>

问题：每次挂载componentDidMount() { this.fetchItemDetails(this.props.id); // fetch the item details this.props.myService.listensTo('eventId', () => { // something changed, fetch again ... }); } componentWillUnmount() { // reset / unregister the listener for this instance }时都会注册侦听器，这会导致多个实例出现问题。

我只想听取主动安装的组件，并且只要卸下它就立即取消。

有什么想法吗？

提前致谢！

Answer 1

您必须保留对作为回调使用的函数的引用。通常，事件监听器所做的是保留事件发生时必须调用的所有回调函数的内部结构，因此，当你想要停止监听时，你必须告诉事件调度程序哪个函数必须是从列表中排除。因为唯一能为您提供该信息的是对回调函数本身的引用。我会做以下事情：

constructor(){
    super();
    this.myListener = this.myListener.bind(this); // Do this only if necessary
}

componentDidMount() {
    this.fetchItemDetails(this.props.id); // fetch the item details

    this.props.myService.listensTo('eventId', myListener);
}

myListener(){
    //...
}

componentWillUnmount() {
   // reset / unregister the listener for this instance
   this.props.myService.deregister('eventId', myListener);
}

重要的是保持对函数的引用，这就是将绑定放在构造函数中的重要性。

本机反应：如何取消注册侦听器/服务？

1 个答案: