首頁猿問 setState回調不等待狀態更新

setState回調不等待狀態更新

JavaScript

慕工程0101907 2023-11-02 17:27:48

我有這段代碼： handleMaxLevel = event => { this.setState({ maxLevel: event.target.value }, (minLevel, maxLevel) => { let filter = this.state.filteredPlayers.filter(players => { return players.level > minLevel && players.level < maxLevel }) this.setState({ levelFilteredPlayers: filter }) }) }我在這段代碼上調用這個函數： <TextField id="standard-number" label="Highest level" type="number" onChange={() => this.handleMaxLevel(this.state.minLevel, this.state.maxLevel)} InputLabelProps={{ shrink: true, }} />我得到的事情是： TypeError: Cannot read property 'value' of undefined它說問題出在這一行： maxLevel: event.target.value 。我不明白，回調不是應該等待第一個 setstate 結束才能執行嗎？為什么它不重新調整設置為 maxLevel 狀態的值？

查看完整描述

2 回答

守候你守候我

TA貢獻1802條經驗獲得超10個贊

你的語法不正確。當您調用時，handleMaxLevel您應該向其傳遞事件對象。并且setState回調不需要任何參數，它已經可以訪問更新的狀態。所以你的onChange處理程序應該是這樣的：

onChange={handleMaxLevel} // If we pass function directly, it will be given the event argument by default

然后在setState回調中直接引用狀態值，因為在回調中它們將被更新：

handleMaxLevel = event => {

this.setState({

...this.state,

maxLevel: event.target.value

}, () => {

let filter = this.state.filteredPlayers.filter(players => {

return players.level > this.state.minLevel && players.level < this.state.maxLevel

})

this.setState({

...this.state,

levelFilteredPlayers: filter

})

}

編輯：我相信您也需要傳播舊狀態，以防止值丟失。另外，最好在一次setState調用中完成所有這些操作，而不是使用回調

反對回復 2023-11-02

Smart貓小萌

TA貢獻1911條經驗獲得超7個贊

這里出了問題是你的函數需要一個參數

const handleMaxLevel = event => {

// ...

}

但是，您的調用正在發送兩個參數

onChange={() => this.handleMaxLevel(this.state.minLevel, this.state.maxLevel)}

如果您想更改函數以接受事件和狀態變量變量：

// Change invocation like so:

onChange={event => this.handleMaxLevel(event, this.state.minLevel, this.state.maxLevel)}

// Change function definition like so:

const handleMaxLevel = (event, minLevel, maxLevel) => {

// ...

}

但是，由于您只是在函數內使用狀態屬性，因此您甚至不需要顯式傳遞它們：

onChange={e => this.handleMaxLevel(e)}

這會讓你的函數看起來像這樣：

const handleMaxLevel = event => {

// access state attributes like this:

const {minLevel, maxLevel} = this.state;

// and now you also have access to the event value

this.setState({ maxValue: e.target.value });

}

反對回復 2023-11-02

2 回答
0 關注
204 瀏覽

關注

添加回答

舉報

0/150

提交

取消

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

熱搜

最近搜索清空

setState回調不等待狀態更新

setState回調不等待狀態更新

2 回答

添加回答