我如何无法更新 ReactJS 中的状态变量?

IT技术 javascript reactjs
2021-04-02 22:33:05

我在 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;
  }
1个回答

文档中(尽管如此,在一个大红色框中):

setState()不会立即变异,this.state而是创建一个挂起的状态转换。this.state调用此方法后访问可能会返回现有值。

第二个(可选)参数是一个回调函数,一旦setState完成并重新渲染组件就会执行

该回调通过更新状态afaik。