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 ='test'”替换“result = this.listNames（）”行，那么它会立即更新。你能解释为什么在我打电话给这些功能时不能解释它吗？

Answer 1

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

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

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

Answer 2

这是因为在{set}

之前调用了listNames()

Answer 3

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

溶液：

使用onChange = {this.handleChange.bind（this）}

而不是onChange = {this.handleChange}

ReactJS状态更新第二次onChange

3 个答案: