奇怪的執行順序反應

Question

Bellow是一個function，handleSubmit，當用戶點擊我表單的提交按鈕時觸發。 在這個 function 中，它調用 requiredInputs function 檢查所有表單值（我已經存儲在狀態中）是否為空。 如果為空，我想將一些錯誤變量（也存儲在狀態中）設置為 true，以便我的程序可以做出相應的響應。 但是，當用戶第一次單擊提交並且有空字段時，錯誤變量在檢查 if 條件導致表單提交之前不會更新。 但是，隨后的無效提交嘗試被阻止，這意味着如果檢查完成，則在提交后更新變量……知道為什么會發生這種行為嗎？

謝謝

function handleSubmit() {
    requiredInputs()
    if (!titleError && !classificationError && !descriptionError) {     
      ### Entering this if statement on first click of submit when above variables should be set to true
      props.submit(title,classification,description,collaborators)
      setTitle("")
      setClassification("")
      setDescription("")
      setCollaborators([])
    }
  }

function requiredInputs () {
  if (title.length<1) setTitleError(true)
  if (description.length<1) setDescriptionError(true)
  if (classification.length<1) setClassificationError(true)
}

Answer 1

您嘗試在設置 state 變量后立即訪問它們。 這是不可能的，因為 state 更新是異步的。 盡管基於 class 的組件提供 setState 回調，例如this.setState({titleError: true}, callback) ，其中回調將更新 state 但在功能組件中不可能。 在這種情況下，您可以嘗試從requiredInputs function 中返回一些 boolean。

 function handleSubmit() { const hasError = requiredInputs() if (hasError) return props.submit(title,classification,description,collaborators); setTitle("") setClassification("") setDescription("") setCollaborators([]) } } function requiredInputs () { let hasError=false if (title.length<1){ hasError=true setTitleError(true) } if (description.length<1){ hasError=true setDescriptionError(true) } if (classification.length<1){ hasError = true setClassificationError(true) } return hasError }

Answer 2

這樣做的原因是 setState 在 React 中是異步的

setState() 不會立即改變 this.state 而是創建一個掛起的 state 轉換。 在調用此方法后訪問 this.state 可能會返回現有值。 無法保證對 setState 的調用同步操作，並且可能會批處理調用以提高性能。

如果您想在 setState 之后使用 state 的值，您可以在 Class 組件中使用回調 function 組件，但對於功能組件，您可以使用 useEffect 鈎子

useEffect(() => {
   if (!titleError && !classificationError && !descriptionError) {     
        props.submit(title,classification,description,collaborators)
        setTitle("")
        setClassification("")
        setDescription("")
        setCollaborators([])
},[TitleError,classificationError,descriptionError])

現在你只需要調用 requiredInputs function

function handleSubmit() {
    requiredInputs()
  }

requiredInputs function 將更新 TitleError、classificationError 和 descriptionError 這將觸發 useEffect 鈎子，您將獲得所需的效果