需要两次按下的反应按钮

Question

我当前的功能组件要求我在运行嵌套的 if 语句之前按两次按钮。根据我目前的理解，任何状态变化都会重新渲染整个组件，所以我相信这就是阻止 if 语句立即运行的原因。如果这是问题，我仍然不确定如何解决它。const [ inputData, setInputData ] = useState("Botany") // Example of stateconst [ lockInputData, setLockInputData ] = useState("")const [ prevLockInputData, setPrevLockInputData ] = useState("")// Button element propinputDataSubmit={ () => 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>随时提供有关编码最佳实践的建议。

Answer 1

我认为因为setState可能是异步的（并且setLockInputData是 a 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, "_"));

  }

}

希望这可以帮助。