Javascript 为什么需要单击两次以更新状态？（React.js，React钩子）

我正在尝试创建更新表单模式来编辑原始数据。我的代码实际上可以工作，但有一个bug需要双击按钮来显示来自API的数据（getTeamsById（））

按钮

<button
  type="button"
  className="btn"
  onClick={() => handleUpdateTeams(team.id)}
>
  <img
    src="/img/icon/ic_edit.png"
    alt="edit"
    className="container-img"
  />
</button>

模态

  const renderUpdateTeams = () => {
    return (
      <Modal
        modalTitle="Update Healthcare Professional"
        show={updateTeamsModal}
        size="lg"
        handleClose={() => handleCloseModal()}
        buttons={[
          {
            label: "Update",
            color: "warning",
            onClick: actionUpdateTeams,
          },
        ]}
      >
        <Row>
          <Col md>
            <Input
              name="avatar"
              label="Profile Picture"
              type="file"
              accept="image/*"
              onChange={handleProfilePicture}
            />
          </Col>
          <Col md>
            <Input
              label="Full Name"
              placeholder="Input Full Name"
              type="text"
              value={fullName}
              onChange={(e) => setFullName(e.target.value)}
            />
          </Col>
        </Row>

    .....

    <Row>
          <Col md>
            <Input
              label="Service Fee"
              placeholder="Input Service Fee"
              type="number"
              min="0"
              value={serviceFee}
              onChange={(e) => setServiceFee(e.target.value)}
            />
          </Col>
        </Row>
      </Modal>
    );
  };

constrenderupdateteams=（）=>{
返回(
handleCloseModal（）}
钮扣={[
{
标签：“更新”，
颜色：“警告”，
onClick:actionUpdateAMS，
},
]}
>
setFullName（e.target.value）}
/>
.....
setServiceFee（e.target.value）}
/>
);
};

---

对于这个问题/bug，您有什么解决方案吗？所有建议都会非常有用。顺便说一句，我正在使用react-redux进行状态管理。

您的

HandleUpdateTeam

函数调用

dispatch

，这会导致

useSelector

中的

myTeam

变量更新，但您的

回调是使用
myTeam
的旧值创建的闭包。因此，您将根据旧的Redux状态而不是新状态设置组件状态

您需要：


从
调度
的返回值中获取新的
数据
值
使用
useffect
hook和
myTeam.userData
作为依赖项，在
myTeam.userData
中的更改发生后响应这些更改

作为旁注，拥有26个州是疯狂的。我想你可以在这里使用一些对象。
你能提供一个MRE吗，对于给定的实现很难分辨任何东西。@BerkKurkcuoglu很抱歉我的解释不好，问题是当我第一次单击按钮时，模式为空（状态未更新）。但当我第二次单击时，一切都很好（状态已更新）。这可能与第一次或第二次单击无关，而是与您在单击按钮时执行的异步操作有关，但同样，如果无法生成问题，则很难准确指出问题。@BerkKurkcuoglu是的，异步，我也这么认为，在这里，如果你想看到文件好的，谢谢，是的，我需要做一些像
[state，setState]=useState（{…}）要最小化单个状态，请按照您的所有步骤进行操作，它会起作用。我需要将
myTeam.userData
设置为依赖项，谢谢。
  const renderUpdateTeams = () => {
    return (
      <Modal
        modalTitle="Update Healthcare Professional"
        show={updateTeamsModal}
        size="lg"
        handleClose={() => handleCloseModal()}
        buttons={[
          {
            label: "Update",
            color: "warning",
            onClick: actionUpdateTeams,
          },
        ]}
      >
        <Row>
          <Col md>
            <Input
              name="avatar"
              label="Profile Picture"
              type="file"
              accept="image/*"
              onChange={handleProfilePicture}
            />
          </Col>
          <Col md>
            <Input
              label="Full Name"
              placeholder="Input Full Name"
              type="text"
              value={fullName}
              onChange={(e) => setFullName(e.target.value)}
            />
          </Col>
        </Row>

    .....

    <Row>
          <Col md>
            <Input
              label="Service Fee"
              placeholder="Input Service Fee"
              type="number"
              min="0"
              value={serviceFee}
              onChange={(e) => setServiceFee(e.target.value)}
            />
          </Col>
        </Row>
      </Modal>
    );
  };