如何清除React.js中的状态?

时间:2015-09-04 21:23:39

标签: javascript reactjs state refluxjs

我想我可能在概念上忽略了React和Reflux的工作原理。

如果我设置了对象(“项目”)的状态,当它呈现到屏幕(具有其现有属性)时,我如何使用相同的状态(和存储)来创建新项目? / p>

这是我项目视图中的一些代码:

componentWillMount: function () {

    // We need to get the project based on projectID.
    var projectID = this.props.params.projectID;

    if (projectID) {
        ProjectActions.getProject(projectID);
    }
},

以下是我项目商店的一些代码:

data: {},

listenables: ProjectActions,

getInitialState: function() {
    return this.data;
},

onGetProject: function (projectID) {

    // Get the project based on projectID.
    $.ajax({
        type: 'GET',
        url: '/api/projects/getProject/' + projectID
    }).done(function(response){
        ProjectStore.getProjectSuccessful(response);
    }).error(function(error){
        alert('GET projects failed.');
    });

},

getProjectSuccessful: function(response) {
    for (var prop in response) {
        if (response.hasOwnProperty(prop)) {
            this.data[prop] = response[prop];
        }
    }
    this.trigger(this.data);
},

然后,说我点击“新项目”,我使用此代码:

mixins: [Reflux.connect(ProjectStore), Router.Navigation],

getInitialState: function () {
    return {
        // Project properties:
        format: '',
        title: '',
        productionCompany: ''

    };
},

我发现如果我从商店中删除“getInitialState”,那么当我去创建一个新项目时没有问题。但是,一旦我这样做,我就不能再编辑我现有的项目了,因为状态没有任何附加内容(我可以使用prop来查看,但这还不够。)

如果我保留“getInitialState”,我会收到错误:

Uncaught Error: Invariant Violation: mergeIntoWithNoDuplicateKeys(): Tried to merge two objects with the same key: `format`. This conflict may be due to a mixin; in particular, this may be caused by two getInitialState() or getDefaultProps() methods returning objects with clashing keys.

我是否需要只有创建操作的“NewProjectStore”?我认为商店可以处理创建,获取,更新等。

我错过了什么吗?

1 个答案:

答案 0 :(得分:3)

当您使用ctrl+a时,它会将Reflux.connect从商店添加到您的组件中。这就是为什么你得到关于重复值的错误。您的答案是使用getInitialState或从组件中删除Reflux.listenTo

第1步:修复商店中的getInitialState

拥有一个商店来保存您的编辑项目或新项目没有任何问题,只要您可以在任何给定时间只拥有一个或另一个。根据您的情况,我建议保留getInitialState()并删除您的组件Reflux.connect。一个问题是商店中的getInitialState没有在组件中声明的默认属性。

第2步:修复流量

这不是错误,因为它确实有效,但是,它并没有遵循通量指南。大多数人都认为异步操作属于该操作。商店仅存储数据,并且通常还提供帮助函数以便以不同方式获取所述数据。试试这个:


更新代码:

getInitialState