Question

我每次尝试在input中键入新内容时都尝试检测重复项，我使用一个简单的for loops，问题是如果新输入不是重复项，则需要单击两次按钮，但是如果新输入是重复输入，则可以正常工作，这是我的代码

teken(event){
    this.setState({nama: event.target.value});
    const angka = todos.length;
    for(var i = 0; i < todos.length; i++){
      {if(todos[i].nama === this.state.value){
        this.setState({beda: false})
        alert("tidak boleh sama")
        break
      }else if(this.state.beda != false){
        this.setState({beda: true})
      }
    }
    }
    if(this.state.beda){
      alert("gas")
    }
    event.preventDefault();
  }

我已经尝试过其他解决方案，但仍然无法正常工作，感谢您提供任何帮助

Answer 1

this.setState（）是一个异步函数。您无法保证它会在到达警报代码之前更新状态值。

Answer 2

这里的问题是，您将todos[i].nama与this.state.value进行比较（由于e.target.value异步工作，因此尚未将其与当前this.setState更新）。我建议这样做：

teken(event){
  event.preventDefault();
  const newValue = event.target.value

  this.setState({ nama: newValue});
  const angka = todos.length;
  for(var i = 0; i < todos.length; i++){
    if(todos[i].nama === newValue){
      this.setState({ beda: false })
      alert("tidak boleh sama")
      alert("gas")
      break
    }else if(this.state.beda != false){
      this.setState({beda: true})
    }
  }
}

更多说明：

// let's say we have this.state.counter = 0
test() {
   this.setState({ counter: this.state.counter + 1 })
   console.log(this.state.counter) // --> will console 0, because it's async
}

如果要使用更新的数据访问this.state.counter，则可以执行以下操作：

this.setState({ counter: this.state.counter + 1 }, () => {
  console.log(this.state.counter)
})

为什么需要单击两次我的按钮才能触发

2 个答案: