我在ReactJS中设置了一个事件处理程序,以便当有人点击"完成"日历条目的复选框,日历条目仍在系统中,但它被标记为隐藏为不显示的内容。 (日历用于允许一次性和重复出现的条目,并允许两者"标记此实例完成"和#34;隐藏此系列"重复条目的选项,但此详细信息不这里关心我。)
我的事件处理程序旨在复制this.state
中的数组,制作克隆,push()
es项目,并将变异克隆保存为直接push()
可能很麻烦的解决方法项目到this.state
下的数组。根据包含的console.log()
语句,我似乎成功获取了项(一个整数,此处等于1
),成功克隆了一个现在为空的数组并push()
整数进入克隆数组,然后无法修改空this.state.hidden_entries
。
我的代码是:
hide_instance: function(eventObject) {
console.log(eventObject);
var id = parseInt(eventObject.target.id.split('.')[1]);
console.log(id);
// var id = eventObject.target.id;
console.log(this.state.hidden_instances);
console.log('Cloned: ');
var hidden_instances = clone(this.state.hidden_instances);
console.log(hidden_instances);
hidden_instances.push(id);
console.log('Before setState()');
console.log(hidden_instances);
this.setState({'hidden_instances': hidden_instances});
console.log(this.state.hidden_instances);
console.log('After setState()');
this.forceUpdate();
},
在console.log()
输出中,我有:
site.js:350 SyntheticEvent {dispatchConfig: Object, dispatchMarker: ".0.3.2:1.1.0.0.0", nativeEvent: MouseEvent, type: "click", target: input#hide-2015-9-18.1.hide-instance…}
site.js:352 1
site.js:354 []
site.js:355 Cloned:
site.js:357 []
site.js:359 Before setState()
site.js:360 [1]
site.js:362 []
site.js:363 After setState()
我的console.log()
语句按顺序说"在setState()"之前,记录变异的克隆,尝试将变异的克隆分配给this.state.hidden_instances
的正确方法,然后读取返回刚设置的状态变量,只是看它保持不变。
在这种情况下,我应该做些什么,将项目附加到this.state.hidden_instances,为什么我的代码无法改变该位置的值?
- UPDATE -
我将发布clone()函数,仅用于JSON可序列化对象,但在给定空数组时它似乎返回一个空数组;我能看到问题的唯一方法是它是否返回相同的空数组而不是新的数组。但万一我错过了什么,这里是:
var clone = function(original) {
if (typeof original === 'undefined' ||
original === null ||
typeof original === 'boolean' ||
typeof original === 'number' ||
typeof original === 'string') {
return original;
}
if (Object.prototype.toString.call(original) === '[object Array]') {
var result = [];
for(var index = 0; index < original.length; index += 1) {
result[index] = clone(original[index]);
}
} else {
var result = {};
for(var current in original) {
if (original.hasOwnProperty(current)) {
result[current] = original[current];
}
}
}
if (typeof original.prototype !== 'undefined') {
result.prototype = original.prototype;
}
return result;
}