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

Question

前几天开始学习react，这里遇到了一个问题。我的网站上有两个元素。输入字段和提交按钮。这两个元素有两个函数，inputValue 函数和 submitField 函数。问题是 inputValue console.log() 函数不显示控制台中输入字段的第一个更改。这意味着如果我输入字母“a”，console.log 将显示一个空输出。只有在输入下一个字母后才会显示输出，但会延迟一个字母。submitField 函数的问题是，当我使用 setState 而不是简单地在列表数组上使用 push 方法时，第一次单击提交按钮不会向数组添加任何内容。使用push方式是没有问题的。我把代码放在下面：

索引.JS

import 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();

应用程序.js

import 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),)