ReactJS中Flux变更监听器（changeListener）失效问题求助

核心问题1：onChange方法上下文丢失 #

你在组件中直接传递this.onChange给监听器，但该方法未绑定组件实例的this。当事件触发时，this指向的是EventEmitter实例而非组件，导致this.setState无法正常执行。

修复方式（三选一即可）：

1. 构造函数内绑定上下文

constructor(props) {
    super(props);
    this.state = initialState;
    this.onChange = this.onChange.bind(this);
}

2. 箭头函数定义方法

onChange = () => {
    this.setState({globalStore: appStore.getAll()});
}

3. 添加监听器时用箭头函数包裹

componentDidMount() {
    appStore.addChangeListener(() => this.onChange());
}

核心问题2：数据引用导致React无法检测更新 #

getAll()直接返回this.data的引用，组件state中的globalStore与store内的data是同一个对象。当store修改data内部属性时，React对比state前后值会认为引用未变，不会触发重新渲染。

修复方式：
修改getAll()返回新对象，切断引用：

getAll() {
    // 浅拷贝数据，确保每次返回新引用
    return {
        ...this.data,
        isLoading: {...this.data.isLoading}
    };
}

额外优化：仅在数据变化时触发事件 #

当前代码无论action是否修改数据都会执行emit，建议把this.emit(name)移到每个case内部，只在数据确实更新时触发事件，避免不必要的组件更新：

registerToActions(action) {
    switch (action.actionType) {
        case STORE_CONST.loader:
            this.setLoader(action.payload);
            this.emit(name);
            break;
        // 其他action case同理
        ...
    }
}

内容的提问来源于stack exchange，提问作者DESH