ReactJS 状态更新在第二个 onChange答案

【问题标题】：ReactJS state updates on second onChangeReactJS 状态更新在第二个 onChange
【发布时间】：2018-05-01 15:23:17
【问题描述】：

我是 React 的初学者；我知道 setState 是异步的，但我不明白为什么在下面框下方的示例笔中，刷新不是立即完成，而是在输入第二个字符后才更新。

Codepen：（更新为链接到正确的笔） https://codepen.io/anon/pen/odZrjm?editors=0010

部分：

// Returns only names matching user's input
filterList = (term) => {
    let finalList = []
    for (let x = 0; x < this.state.names.length; x++) {
      if (this.state.names[x].toLowerCase().includes(term)) {
        finalList.push(this.state.names[x])
      }
    }
    finalList.sort()
    return finalList
}

// Returns the name list as string
listNames = () => {
    let filteredNames = [], filter = this.state.filter.toLowerCase(), names = ""
    if (filter === "") return "Enter filter chars"
    // Generate filtered array with only names matching filter
    filteredNames = this.filterList(filter)
    // Build and return comma-separated list of filtered names
    names = filteredNames.join(', ')
    if (names.length === 0) return 'None found'
    return names
}

handleChange = (event) => {
    let result, alert = 'alert-primary'
    result = this.listNames()
    this.setState({
      filter: event.target.value,
      namesList: result
    })
}

如果我将 handleChange 中的“result = this.listNames()”行替换为“result = 'test'”，那么它会立即更新。你能解释一下为什么我调用函数时它没有吗？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

这是因为您在设置 this.state.filter 之前调用了 listNames 方法，从而达到：

if (filter === "") return "Enter filter chars"

这是一支工作笔：https://codepen.io/anon/pen/gzmVaR?editors=0010

【讨论】：

【解决方案2】：

这是因为 listNames() 在 setState 之前被调用

【讨论】：

【解决方案3】：

当您调用 handleChange 方法时，它找不到 'this' 范围。所以'this'是未定义的，不能调用this.listNames()。

解决方案：

使用 onChange={this.handleChange.bind(this)}

而不是 onChange={this.handleChange}

【讨论】：