Question

单击按钮，我正在更新状态，它正在成功更新和更改输入框的值并在屏幕上打印，但是当我使用console.log状态变量在其中更新状态时（您可以请参阅changeState函数中的console.log）。它没有改变。下面是我的代码。

 import React from 'react';

 class Refs extends React.Component {
   constructor(props) {
    super(props);
     this.state = {
      data: ''
     }
     this.updateState = this.updateState.bind(this);
     this.changeState = this.changeState.bind(this);
   };
   updateState(e) {
     this.setState({data: e.target.value});
   }
   changeState() {
     this.setState({data: 'Hi coding!'});
     console.log(this.state.data);
   }
   render() {
    return (
     <div>
        <input value = {this.state.data} onChange = {this.updateState}></input>
        <h4>{this.state.data}</h4>
        <button onClick = {this.changeState}>CLEAR</button>
     </div>
    );
   }
 }
export default Refs;

Answer 1

this.setState（）实际上是异步的。

在console.log值时状态未更新。

如果要在状态更新时运行某些代码，可以将回调传递给setState（），如@Nikko的注释中所述。

this.setState( {data: 'Hi coding!'}, () => {
    console.log(this.state.data)} 
);

您应该阅读以下内容：

https://reactjs.org/docs/faq-state.html#why-is-setstate-giving-me-the-wrong-value

Answer 2

您未将函数作为props传递

调用与您在同一函数中相同的函数

     <div>
        <input value = {this.state.data} onChange = {() => this.updateState()}></input>
        <h4>{this.state.data}</h4>
        <button onClick = {(e) => {e.preventDefault(); this.changeState();}>CLEAR</button>
     </div>

当在React Js中更新的相同功能上打印时状态未更新

2 个答案: