前幾天開始學習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;有人可以向我解釋一下嗎?
為什么我的 setState() 行為與我的代碼不可預測?
GCT1015
2023-06-09 17:44:56