Javascript 第二次更改时ReactJS状态更新

我是一个反应的初学者；我知道setState是异步的，但我不明白为什么在示例中，方框下方的笔没有立即刷新，只在输入第二个字符后更新

代码笔：更新为链接到正确的笔

部分：

// 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行替换为just result='test'，则它会立即更新。你能解释一下为什么我调用函数时它没有出现吗？

之所以出现这种情况，是因为你在设置this.state.filter之前调用了listNames方法，从而达到：

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

---

这是一支工作笔：

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

当您调用handleChange方法时，它找不到“This”范围。 因此“this”未定义，无法调用this.listNames

解决方案：

use onChange={this.handleChange.bindthis}

而不是onChange={this.handleChange}