我是如何失败的更新状态变量在ReactJS
How am I failing to update a state variable in ReactJS?
我在ReactJS中设计了一个事件处理程序,这样当有人点击日历条目的"Done"复选框时,日历条目仍然在系统中,但它被标记为隐藏的东西而不显示。(日历允许一次性和循环条目,并且允许"标记此实例已完成"answers"隐藏此系列"选项用于循环条目,但此细节在这里与我无关。)
我的事件处理程序旨在复制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,为什么我的代码无法在该位置改变值?
——更新
我将发布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;
}
来自文档(尽管在一个红色的大框中):
setState()
不会立即突变this.state
,但会创建一个暂挂状态转换。调用此方法后访问this.state
可能会返回现有值。
和
第二个(可选)参数是一个回调函数,它将在
setState
完成并重新渲染组件时执行。
这个回调会自动传递更新状态
- 更新Redux状态&然后在同一实例中获取更新状态
- 如果我不应该在组件WillUpdate中调用setState,如何更新状态(使用ReactJS)
- 如何在alt.js中使用源成功请求后更新状态
- 实现已验证用户更新状态的最佳方式,作为对系统中已更改状态的反应.(ASP.NET MVC网站)
- 如何使用Redux更新状态
- 使用 OnChange 事件更新状态具有延迟字符
- 在 redux 化简器中更新状态的正确方法
- 在反应本机中更新状态需要很长时间
- React - 如何在 AJAX 请求后更新状态
- onchange 事件更新状态,延迟为 1 个字符
- 在循环中调用 setState 仅更新状态 1 次
- react js和rails在具有活动记录关系的组件上更新状态
- React componentDidMount未更新状态
- 发送整个对象只是为了更新状态
- Javascript的问题.无法更新状态
- 当视图加载时更新状态
- Twitter REST API,更新状态
- 在React Router中,当页面改变时更新状态
- React-redux, connect函数不使用新数据更新状态
- React:将新插入的子元素返回给父元素以更新状态