时间戳

首页 > 解决方案 > 无法在第一个按钮单击reactjs中保存文本框的值

javascript - 无法在第一个按钮单击reactjs中保存文本框的值

问题描述

我可以请求你的帮助吗？我正在尝试将文本框数据保存或存储到钩子中。但是，单击保存按钮后，文本框中的数据尚未保存到我的 useState 中。我需要再次单击保存按钮才能将其保存到挂钩。

请参见下面的代码。

const [updateApprovalStatus, setupdateApprovalStatus] = useState({
  ADVISORYID: "",
  STATUS: "",
  REMARKS: "",
  REJECTEDREMARKS: "",
});

const [txtAdvisoryApprovalRemarks, settxtAdvisoryApprovalRemarks] = useState(
  ""
);
const approvalRemarksOnChange = (event) => {
  settxtAdvisoryApprovalRemarks(event.target.value);
};
const updateApproval = () => {
  if (updateApprovalStatus.STATUS === "APPROVED") {
    setupdateApprovalStatus((prevState) => ({
      ...prevState,
      REMARKS: txtAdvisoryApprovalRemarks,
    }));
    setupdateApprovalStatus((prevState) => ({
      ...prevState,
      REJECTEDREMARKS: "",
    }));
  } else if (updateApprovalStatus.STATUS === "REJECTED") {
    //console.log('save to rejected remarks')
    setupdateApprovalStatus((prevState) => ({
      ...prevState,
      REJECTEDREMARKS: txtAdvisoryApprovalRemarks,
    }));
    setupdateApprovalStatus((prevState) => ({
      ...prevState,
      REMARKS: "",
    }));
  }
  console.log("updateApprovalStatus", updateApprovalStatus); //returns the array but no remarks or rejectedremarks saved
};

成分

<TextField
    className={style.inputMaterial}
    label="Remarks"
    name="REMARKS"
    onChange={approvalRemarksOnChange}
/>
<br />
<Button color="primary" onClick={() => updateApproval()}>
  Save{" "}
</Button>

在我第一次点击时，我得到了这个

{ADVISORYID: 370, STATUS: "APPROVED", REMARKS: "", REJECTEDREMARKS: ""}

在第二次点击时，这是价值生效的地方。根据控制台日志。

{ADVISORYID: 370, STATUS: "APPROVED", REMARKS: "remarks", REJECTEDREMARKS: ""}

希望得到您的理解 谢谢

标签： javascriptreactjs

解决方案

你应该了解它是如何setState工作的。当你打电话时，setState你告诉反应“你能帮我把这个变成状态吗？”。然后你就忘了它。价值仍然没有改变。一旦 react 有时间，它会更改状态并以新状态重新运行您的组件，因此整个过程是异步的。

当您调用时console.log，react 尚未将您的新状态保存在它的内部存储中，这就是为什么您在第一次运行时没有得到它 - 状态仍然相同。尝试渲染您的状态（使用JSON.stringify）以查看状态更新。

此外，由于它是异步过程，React 可能会忽略后续状态更改并仅应用最后一个。一次完成所有更改要容易得多。

这是工作示例（在控制台和渲染中查看）：https ://jsfiddle.net/zrsfb96x/

推荐阅读