时间戳

首页 > 解决方案 > 为什么我的 setState() 在我的代码中表现得不可预测？

javascript - 为什么我的 setState() 在我的代码中表现得不可预测？

问题描述

几天前我开始学习反应，在这里我遇到了一个问题。我的网站上有两个元素。输入字段和提交按钮。这两个元素有两个函数，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();

APP.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;

有人可以向我解释一下吗？

标签： javascriptreactjs

解决方案

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

this.setState({ 
    abc: xyz 
  }, 
  () => console.log(this.state.abc),
)

推荐阅读