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

Question

我想我可能在概念上遗漏了一些关于 React 和 Reflux 如何工作的东西。

如果我设置了一个对象的状态 ("project")，当它呈现到屏幕上时（使用其现有属性），我如何才能使用相同的状态（和存储）创建一个新项目？

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

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);
},

然后，假设我点击 "new project"，我使用此代码：

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" 吗？我曾认为商店可以处理创建、获取、更新等

我是不是漏掉了什么？

Answer 1

当您使用 Reflux.connect 时，它会将商店中的 getInitialState 添加到您的组件中。这就是为什么您会收到有关重复值的错误的原因。您的答案是使用 Reflux.listenTo 或从您的组件中删除 getInitialState。

第 1 步：在您的商店中修复 getInitialState()

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

第 2 步：修正您的磁通量

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

更新代码：

var ProjectActions = Reflux.createActions({
    getProject: {asyncResult: true}
});
ProjectActions.getProject.listen(function (projectID) {
    // Get the project based on projectID.
    $.ajax({
        type: 'GET',
        url: '/api/projects/getProject/' + projectID
    }).done(function(response){
        ProjectActions.getProject.completed(response);
    }).error(function(error){
        alert('GET projects failed.');
        ProjectActions.getProject.failed(error);
    });
});

var ProjectStore = Reflux.createStore({
    init: function () {
        // default project properties:
        this.data = {
            format: '',
            title: '',
            productionCompany: ''
        };
    },

    listenables: ProjectActions,

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

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

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

How can I clear the state in React.js?

javascript

state

reactjs

refluxjs