Javascript 需要两次按下的反应按钮

我当前的功能组件要求我在运行嵌套的if语句之前按两次按钮

根据我目前的理解，任何状态的改变都会重新呈现整个组件，因此我相信这就是阻止if语句立即运行的原因。
如果这是一个问题，我仍然不确定如何解决它

const [ inputData, setInputData ] = useState("Botany") // Example of state
const [ lockInputData, setLockInputData ] = useState("")
const [ prevLockInputData, setPrevLockInputData ] = useState("")

// Button element prop
inputDataSubmit={ () => submitData(inputData) } // On button press this will be called.

const submitData = async (inputData) => {
setLockInputData(inputData);

  if (lockInputData !== "" && lockInputData !== prevLockInputData) {
    await newCat(inputData.replace(/[" "]/g, "_"));
    setPrevLockInputData(lockInputData);
  } else if (lockInputData !== "" && lockInputData === prevLockInputData) {
    await newSubCat(inputData.replace(/[" "]/g, "_"));
  }
}

正在使用inputDataSubmit的组件位：

<form 
  onSubmit={ () => false}
>
  <input
    action=""
    type="text"
    placeholder="Category"
    value={props.inputData}
    onChange={props.handleChange} 
  />
        
  <button
    type="button" 
    onClick={props.inputDataSubmit}
  >
  Random
  </button>
</form>

false}
>
随机的

---

请随时提供编码最佳实践方面的建议。

我认为这是因为

setState

可以是异步的（而

setLockInputData

是

setState

）

你可以试试：

const submitData = async (inputData) => {
  setLockInputData(inputData);

  if(inputData !== "") {
    if(inputData !== prevLockInputData) {
      await newCat(inputData.replace(/[" "]/g, "_"));
      setPrevLockInputData(inputData);
    }
    else
      await newSubCat(inputData.replace(/[" "]/g, "_"));
  }
}

---

希望这能有所帮助。

请您也分享一下您在哪里使用

inputDataSubmit

？好的，我也添加了这一点。