亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

為什么我的 setState() 行為與我的代碼不可預測?

為什么我的 setState() 行為與我的代碼不可預測?

GCT1015 2023-06-09 17:44:56
前幾天開始學習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;有人可以向我解釋一下嗎?
查看完整描述

1 回答

?
交互式愛情

TA貢獻1712條經驗 獲得超3個贊

setState()是異步的,因此不會立即應用狀態更改。如果你想要 console.log 新狀態,setState()接受一個函數作為第二個參數,并在狀態更新時執行該函數。所以:

this.setState({?

? ? abc: xyz?

? },?

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

)


查看完整回答
反對 回復 2023-06-09
  • 1 回答
  • 0 關注
  • 132 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號