需要两次按下的反应按钮

Question

我当前的功能组件要求我在运行嵌套的 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>

随时提供有关编码最佳实践的建议。

Answer 1

我认为因为setState可能是异步的（并且setLockInputData是 a setState）。你可以试试：const submitData = async (inputData) => {&nbsp; setLockInputData(inputData);&nbsp; if(inputData !== "") {&nbsp; &nbsp; if(inputData !== prevLockInputData) {&nbsp; &nbsp; &nbsp; await newCat(inputData.replace(/[" "]/g, "_"));&nbsp; &nbsp; &nbsp; setPrevLockInputData(inputData);&nbsp; &nbsp; }&nbsp; &nbsp; else&nbsp; &nbsp; &nbsp; await newSubCat(inputData.replace(/[" "]/g, "_"));&nbsp; }}希望这可以帮助。