React搜索栏onChange方法首次输入字符未触发搜索的技术问题咨询

嘿，我一眼就看出问题所在啦！这是React中setState的异步更新特性导致的小坑～

问题原因分析 #

当你在onInputChange里调用this.setState({ term: event.target.value })时，React并不会立刻更新组件的state，而是把这个更新操作加入到异步更新队列中，等合适的时机再批量处理。所以紧接着调用this.props.onInputChange(this.state.term)时，this.state.term还是更新前的旧值：

• 输入第一个"f"时，state还没更新，传递的是空字符串，所以没触发对应"f"的搜索
• 输入第二个"f"时，state才更新成第一个"f"，这时候传递的是第一个"f"，触发了搜索

两种解决方案 #

方案1：使用setState的回调函数

setState支持第二个参数（回调函数），这个函数会在state更新完成后执行，此时就能拿到最新的state值了：

export class SearchBar extends React.Component {
  state = { term: '' }

  onInputChange = (event) => {
    event.preventDefault()
    this.setState({ term: event.target.value }, () => {
      // 这里的this.state.term已经是更新后的值了
      this.props.onInputChange(this.state.term)
    })
  }

  render() {
    return (
      <div className="search-bar">
        <div className="ui form">
          <div className="field">
            <input type="text" value={this.state.term} onChange={this.onInputChange} />
          </div>
        </div>
      </div>
    )
  }
}

方案2：直接传递event.target.value

既然event.target.value就是输入框的最新值，我们可以跳过state，直接把它传递给父组件的方法：

export class SearchBar extends React.Component {
  state = { term: '' }

  onInputChange = (event) => {
    event.preventDefault()
    const newTerm = event.target.value
    this.setState({ term: newTerm })
    this.props.onInputChange(newTerm)
  }

  render() {
    return (
      <div className="search-bar">
        <div className="ui form">
          <div className="field">
            <input type="text" value={this.state.term} onChange={this.onInputChange} />
          </div>
        </div>
      </div>
    )
  }
}

小提示 #

React的setState异步更新是为了性能优化，批量处理多个state更新。作为新手，记住不要在调用setState后立刻读取state，要么用回调，要么用最新的数据源（比如这里的event.target.value）就好啦～

内容的提问来源于stack exchange，提问作者MadMax