时间戳

首页 > 解决方案 > 无法在 React 中访问函数内部状态变量的正确值

javascript - 无法在 React 中访问函数内部状态变量的正确值

问题描述

我在 React 中创建了一个表单，它有一个按钮，在验证输入数据后应该重定向到下一个表单。该按钮如下所示：

<Button type = "submit" onClick = {(event) => {validateData(event,"basicInfo")}} className = "button" variant="contained" color="secondary" style = {buttonStyle}>Validate Data</Button>

validateData 函数如下：

var validateData = (event,section) => {
    props.handleSubmit(event,section);
    console.log(props.errors); //Added to debug

    //Following is the code I actually want to execute
    /*if( !props.errors.firstName && !props.errors.lastName && !props.errors.email && 
         !props.errors.address){
     history.push("/resume-gen/education");
    } */
  }

在 validateData 中调用的 handleSubmit 函数具有验证逻辑，并在验证时更新状态变量错误。

这里的问题是 props.errors 没有显示为由在 validateData 函数中使用的 console.log() 记录的更新。console.log 的结果是：

{firstName: "", lastName: "", email: "", address: "", educationInfos: Array(1), …}

而它应该是

{firstName: "First Name is required.", lastName: "Last Name is required.", email: "Email is required.", address: "Address is required.", educationInfos: Array(1), …}

这是在第二次点击时记录的（但应该在第一次点击时发生）

从代码中的其他任何地方记录 props.errors 会给出更新的错误。因此，问题似乎出在函数 validateData 内部。此外，第一次单击按钮时会正确打印 props.errors 属性（打印在页面上）。我需要再次单击该按钮以获取从函数内部记录的错误的更新值。我不明白函数内部出了什么问题。我曾尝试在回调函数中登录，但无济于事。

标签： javascriptreactjs

解决方案

从给定的代码中，我可以确定调用 更新您传递给该组件props.handleSubmit(event,section);的父状态。props

state更新将导致您的父级重新渲染，这意味着您的Button元素也将被重新渲染，只有这样您才能获得更新后的 props。

您实质上记录的是props.errors当前渲染中可用的值。您无法获得最新值，因为validateData正在关闭props当前渲染的值。

在新的渲染validateData上将再次创建并关闭更新 props的值。

props.errors我想您可以先使用event和section作为参数来验证东西（如果可能），然后再调用props.handleSubmit(event,section);和history.push("/resume-gen/education");编码，而不是依赖于这里。

注意：-从其他任何地方进行日志props.errors记录必须正常工作，因为您必须将其记录在Button函数体内，每次重新渲染时都会有更新的值，这与可能导致更新但不包含更新值的事件处理程序不同，因为它们关闭超过以前重新渲染的那些。此外，如果Button是类组件，那么您必须在render方法中看到正确的值。

推荐阅读