我是如何失败的更新状态变量在ReactJS

How am I failing to update a state variable in ReactJS?

本文关键字:更新 状态 变量 ReactJS 失败 何失败      更新时间:2023-09-26

我在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完成并重新渲染组件时执行。

这个回调会自动传递更新状态