我在 ReactJS 中设计了一个事件处理程序,以便当有人单击日历条目的“完成”复选框时,日历条目仍在系统中,但它被标记为隐藏,不显示。(日历允许一次性条目和重复条目,并允许“将此实例标记为完成”和“隐藏此系列”选项用于重复条目,但此细节在这里与我无关。)
我的事件处理程序旨在复制一个数组中this.state
,使得克隆,push()
上课项目,节省了突变克隆作为一个直接繁琐的可能解决办法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,以及为什么我的代码无法改变该位置的值?
- 更新 -
我将发布仅用于 JSON 可序列化对象的 clone() 函数,但当给定一个空数组时,它似乎返回一个空数组;我能看到问题的唯一方法是它是否返回相同的空数组而不是新数组。但如果我错过了什么,这里是:
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;
}