React SetState 不调用渲染

Question

我将函数发送到 callBack 的子组件。在父级中，我有一个带有 setState 方法的函数：

onInputUpdated(id){
  var array = {};
  let char = id.slice(-1);
  console.log(this.state.states)
  switch(char){
    case 'a':
      array[id] = this.getY(ReactDOM.findDOMNode(this.refs[id].refs.inp).value);
      break;
    case 'b':
      array[id] = this.getX(ReactDOM.findDOMNode(this.refs[id].refs.inp).value);
      break;
  }

  let oldStates = this.state.states;
  oldStates[id] = array[id];

  this.setState({
    states: oldStates
  });
  console.log(oldStates);
}

其中 states 是一个对象。

在此之后，设置states。我可以在下一个 callBack 中看到它，我在那里打印到控制台。但是，不会调用 render 方法。在 componentMount 期间，一切都正确呈现。

怎么办？谢谢。

Answer 1

当您执行 let oldStates = this.state.states; 时，您只是使 oldStates 变量成为对 this.state.states 的引用，因此您实际上是在调用 setState 之前更改状态。

尝试制作它的副本，例如 let oldStates = Object.assign({}, this.state.states，或者如果您需要深度克隆，则使用 lodash 或类似的东西。

Answer 2

我想你正在设置它，然后又重新设置它。尝试创建一个全新的对象实例。这是使用 underscore.

的方法

首先请确保您运行满足以下条件。 . .

npm install --save underscore

然后导入下划线。 . .

import _ from 'underscore';

然后克隆对象。

let oldStates = _.clone(this.state.states);

React SetState 不调用渲染

React SetState doesn't call render

render

callback

setstate

reactjs