Question

对不起，如果我无法正确解释我的问题，因为英语不是我的主要语言。

我创建了一个表单组件（用es6编写），如下所示：

class Form extends React.Component {
  constructor(...args) {
    super(args);
    this.state = { input: '' };
  }

  render() {
    return (
      <form>
         <input
           type="text"
           onChange={this.onInputChange.bind(this)}
         />
      </form>
    );
  }

  onInputChange(e) {
    this.setState({ input: e.target.value });
    console.log(`state: ${this.state}, value: ${e.target.value}`); // this is my checking
  }
}

你看到我所在的行console.log？现在，当我尝试输入一些东西时在浏览器上：

// I type this: my word
// on every character input, the output is:

// state: , value: m
// state: m, value: my
// state: my, value: my 
// state: my , value: my w
// state: my w, value: my wo
// state: my wo, value: my wor
// state: my wor, value: my word

// I do backspace
// state: my word, value: my wor
// state: my wor, value: my wo
// state: my wo, value: my w
// state: my w, value: my 
// state: my , value: my
// state: my, value: m
// state: m, value:

请参阅？每个输入的状态都是迟到的一个字符。这不好验证输入长度。那我做错了什么？或者，我错过了什么？

Answer 1

在setState方法上使用回调。

onInputChange(e) {
    this.setState({ input: e.target.value }, () => {
        console.log(`state: ${this.state}, value: ${e.target.value}`);
    });
}

来自docs：

第二个（可选）参数是一个回调函数完成setState后执行并重新呈现组件。

Answer 2

setState不会立即改变Thread。您可以将setState回调作为第二个参数传递并获得更新状态

class WorkerThread extends Thread {
    private static final int QUIT = -1;
    public Handler mHandler;

    public void run() {
        Looper.prepare();

        mHandler = new Handler() {
            public void handleMessage(Message msg) {
                // do stuff

                if(msg.what == QUIT){
                    Looper.myLooper().quit();
                }

                // do stuff
            }
        };

        Looper.loop();
    }
}

Example

Answer 3

这是因为console.log甚至在this.setState完成其操作之前就开始了。您需要在回调中传递console.log以确保仅在this.setState完成后调用它。

onInputChange(e) {
   this.setState({ input: e.target.value }, () => {
     console.log(`state: ${this.state}, value: ${e.target.value}`); // the console message code
   });
}

Answer 4

如果您想在更新后立即使用更改后的值，则可以使用其他辅助变量。

class Form extends React.Component {
  constructor(...args) {
    super(args);
    this.state = { input: '' };
    this.input = "";
  }

  render() {
    return (
      <form>
         <input
           type="text"
           onChange={this.onInputChange.bind(this)}
         />
      </form>
    );
  }

  onInputChange(e) {
    this.setState({ input: e.target.value });
    this.input = e.target.value;
    console.log(`state: ${this.input}, value: ${e.target.value}`); // this is my checking
  }
}

但你应该使用this.state.text变量来显示UI上的值。

React JS：setState在最后一次输入时迟到

4 个答案: