javascript - ReactJS 状态在第二次 onChange 时更新

Question

我是 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'”，那么它会立即更新。你能解释一下为什么当我调用函数时它没有出现吗？

Answer 1

发生这种情况是因为您在设置 this.state.filter 之前调用了 listNames 方法，从而达到:

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

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