Question

从2周前开始，我在React / Flux应用程序中遇到了问题。它已在ES6中完成并使用webpack和babel。

它实际上并没有进入商店发出更改事件的_onChange方法。因此，组件本身不会再次使用修改后的状态进行渲染。

您可以在这里查看我的组件：

import React from 'react';
import Item from 'components/item/item';
import Actions from './item-list.actions';
import Store from './item-list.store';

const StoreInstance = new Store();

class ItemList extends React.Component {

    constructor(props) {
        super(props);
        this._onChange = this._onChange.bind(this);
        this.state = this.getItemListState();
    }

    componentWillMount() {
        StoreInstance.addChangeListener(this._onChange);
        Actions.requestFlats(Actions.setFlats);
    }

    componentWillUnmount() {
        StoreInstance.removeChangeListener(this._onChange);
    }

    _onChange() {
        this.setState(this.getItemListState);
    }

    getItemListState() {
        return {
            flats: StoreInstance.getFlats()
        }
    }

    render() {
        return(
            <ul className="item__list">{
                this.state.flats.map((flat, index) => {
                    <li className="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                        <Item key={index} flat={flat}></Item>
                    </li>
                })
            }</ul>
        );
    }
}

export default ItemList;

我的行动：

import AppDispatcher from 'services/dispacher/dispacher';
import Constants from './item-list.constants';

let ItemListActions = {
    getFlats: () => {
        AppDispatcher.handleAction({
            type: Constants.GET_FLATS,
            data: {}
        });
    },

    setFlats: (flats) => {
        AppDispatcher.handleAction({
            type: Constants.SET_FLATS,
            data: {
                flats
            }
        });
    },

    requestFlats: (callback) => {
        AppDispatcher.handleAction({
            type: Constants.REQUEST_FLATS,
            data: {
                callback
            }
        });
    }
};

export default ItemListActions;

并存储：

import AppDispatcher from 'services/dispacher/dispacher';
import AppStore from 'services/store/store';

import Api from './item-list.api';
import Constants from './item-list.constants';

class ItemListStore extends AppStore {
    constructor() {
        super();
        this.flats = [];
    }

    requestFlats(callback) {
        Api.getFlats(callback);
    }

    getFlats() {
        return this.flats;
    }

    setFlats(flats) {
        this.flats = flats;
    }
}

const ItemListStoreInstance = new ItemListStore();

AppDispatcher.register((payload) => {
    let action = payload.action;

    switch (action.type) {
        case Constants.GET_FLATS:
            ItemListStoreInstance.getFlats(action.data);
            break;
        case Constants.SET_FLATS:
            ItemListStoreInstance.setFlats(action.data.flats);
            break;
        case Constants.REQUEST_FLATS:
            ItemListStoreInstance.requestFlats(action.data.callback);
            break;
        default:
            return true;
    }

    ItemListStoreInstance.emitChange();
});

export default ItemListStore;

扩展了AppStore

import EventEmitter from 'events';

const CHANGE_EVENT = 'change';

class Store extends EventEmitter {

  constructor() {
    super();
  }

  emitChange() {
    this.emit(CHANGE_EVENT);
  }

  addChangeListener(callback) {
    this.on(CHANGE_EVENT, callback);
  }

  removeChangeListener(callback) {
    this.removeListener(CHANGE_EVENT, callback);
  }
}

Store.dispatchToken = null;

export default Store;

我已多次查看此代码并查看整个互联网上的示例，但我没有成功。

我认为当我这样做时：

StoreInstance.addChangeListener(this._onChange);

商店将会收听我的更改活动，但看起来并非如此。当我从API获取新数据时，执行setFlats并且不执行_onChange，因此不会显示UI上的任何更改。

您是否在此代码中看到任何问题？有什么能帮我解决的吗？

提前致谢。

Answer 1

我没有看到任何使用ItemListStore的地方。您的组件正在使用“Store”类，该类仅扩展EventEmitter。无法找到与ItemListStore的连接。

这一行（在你的ItemListStore中）：

ItemListStoreInstance.emitChange();

不会触发Store中的emitChange（）方法。

Answer 2

问题实际上是在商店中返回ItemListStore而不是ItemListStore的实例，然后在组件中我有另一个实例，这就是为什么它没有相互通信。< / p>

以下是ItemListStore的固定代码：

import AppDispatcher from 'services/dispacher/dispacher';
import AppStore from 'services/store/store';

import Api from './item-list.api';
import Constants from './item-list.constants';

class ItemListStore extends AppStore {
    constructor() {
        super();
        this.flats = [];
    }

    requestFlats(callback) {
        Api.getFlats(callback);
    }

    getFlats() {
        return this.flats;
    }

    setFlats(flats) {
        this.flats = flats;
    }
}

const ItemListStoreInstance = new ItemListStore();

AppDispatcher.register((payload) => {
    let action = payload.action;

    switch (action.type) {
        case Constants.GET_FLATS:
            ItemListStoreInstance.getFlats(action.data);
            break;
        case Constants.SET_FLATS:
            ItemListStoreInstance.setFlats(action.data.flats);
            break;
        case Constants.REQUEST_FLATS:
            ItemListStoreInstance.requestFlats(action.data.callback);
            break;
        default:
            return true;
    }

    ItemListStoreInstance.emitChange();
});

export default ItemListStoreInstance;

React / Flux商店不会改变它的状态

2 个答案: