为什么我的 setState() 行为与我的代码不可预测？

Question

前几天开始学习react，这里遇到了一个问题。我的网站上有两个元素。输入字段和提交按钮。这两个元素有两个函数，inputValue 函数和 submitField 函数。问题是 inputValue console.log() 函数不显示控制台中输入字段的第一个更改。这意味着如果我输入字母“a”，console.log 将显示一个空输出。只有在输入下一个字母后才会显示输出，但会延迟一个字母。submitField 函数的问题是，当我使用 setState 而不是简单地在列表数组上使用 push 方法时，第一次单击提交按钮不会向数组添加任何内容。使用push方式是没有问题的。我把代码放在下面：索引.JSimport React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import * as serviceWorker from './serviceWorker';ReactDOM.render(    <App />,   document.getElementById('root'));serviceWorker.unregister();应用程序.jsimport React, {Component} from 'react';import ListInput from './ListInput';import './index.css';class App extends Component { // jest to nowy syntax - nie trzeba tworzyć już konstruktora i używać super do dziedziczenia po obiekcie nadrzędnym. Wystarczy tak jak jest tutaj    state = {      inputField: '',      list: []    }    inputValue = (event) => {    this.setState({inputField: event.target.value});     console.log(this.state.inputField); // this not showing first change on input field - why? ex. if i put 'a' in input field i got blank console.log.  }  submitField = () => {    this.setState({list:[this.state.inputField]}) // this working with one click delay- on first try returning empty array on consol.log, even if inputField state is modified    // this.state.list.push(this.state.inputField);  // this working fine - adding  element to list array on first try    console.log(this.state.list);      }  render() {    return(      <div>        <ListInput submit={this.submitField} input={this.inputValue}/>      </div>    )  }}export default App;带有事件的 LISTINPUT.JS 组件import React from 'react';const ListInput = ({submit, input}) => {    return (        <div className='list-input'>            <input onChange={input} type='text' placeholder='add item' />            <button onClick={submit}>Submit</button>        </div>    )}export default ListInput;有人可以向我解释一下吗？

Answer 1

setState()是异步的，因此不会立即应用状态更改。如果你想要 console.log 新状态，setState()接受一个函数作为第二个参数，并在状态更新时执行该函数。所以：

this.setState({ 

    abc: xyz 

  }, 

  () => console.log(this.state.abc),

)