奇怪的执行顺序反应

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 钩子，您将获得所需的效果