我想我可能在概念上忽略了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”?我认为商店可以处理创建,获取,更新等。
我错过了什么吗?
答案 0 :(得分:3)
当您使用ctrl+a
时,它会将Reflux.connect
从商店添加到您的组件中。这就是为什么你得到关于重复值的错误。您的答案是使用getInitialState
或从组件中删除Reflux.listenTo
。
第1步:修复商店中的getInitialState
拥有一个商店来保存您的编辑项目或新项目没有任何问题,只要您可以在任何给定时间只拥有一个或另一个。根据您的情况,我建议保留getInitialState()
并删除您的组件Reflux.connect
。一个问题是商店中的getInitialState
没有在组件中声明的默认属性。
第2步:修复流量
这不是错误,因为它确实有效,但是,它并没有遵循通量指南。大多数人都认为异步操作属于该操作。商店仅存储数据,并且通常还提供帮助函数以便以不同方式获取所述数据。试试这个:
更新代码:
getInitialState