setState和SyntheticEvent產生的錯誤

先看一段代碼

import React from 'react'

class Input extends React.Component {
  state = {
    value: ''
  }
  onChange = (e) => {
    // this.setState({value: e.target.value})
    this.setState(prev => ({...prev, value: e.target.value}))
  }
  render() {
    return <input value={this.state.value} onChange={this.onChange}/>
  }
}

export default Input
複製代碼

上面的代碼看似沒有問題，可是注意到setState傳入了一個方法，而不是註釋裏面直接傳值，因而你放心的操做，結果報錯了

發生了什麼，爲何e.target.value沒有值了？？

Why?

首先我們要清楚兩個概念

1. setState是異步的
2. react的事件是合成事件，是存放在事件池(一個放對象的地方，爲了節省內存，使用完會銷燬)

緣由 setState直接傳值，react更新機制會保存這個臨時值，等到更新是將全部值合併，而函數則會在更新時去執行獲取返回值，這個過程是異步的，也就是你去執行函數時，實際上是已通過了一段時間，react的合成事件在使用完就會馬上銷燬掉，你這時候去拿到的固然沒有值。

解決方法

1. setState不傳入函數，直接傳值

onChange = (e) => {
    this.setState({value: e.target.value})
}
複製代碼

2. 使用event.persist()，這樣react處理時會一直保存這個事件，而不會銷燬

onChange = (e) => {
    e.persist()
    this.setState(prev => ({...prev, value: e.target.value}))
}
複製代碼