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}))
}
复制代码