为什么需要点击两次才能更新状态？ (React.js, React Hooks)答案

【问题标题】：Why need to click twice to update the state? (React.js, React Hooks)为什么需要点击两次才能更新状态？ (React.js, React Hooks)
【发布时间】：2021-04-16 12:20:32
【问题描述】：

我正在尝试创建更新表单模式以编辑原始数据。我的代码确实有效，但有一个错误需要双击按钮才能显示来自 API (getTeamsById()) 的数据。

按钮

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

handleUpdateTeams()

  const handleUpdateTeams = (teamId) => {
    dispatch(getTeamsById(teamId))
      .then(() => {
        setId(teamId);
        let data = myTeam.userData;
        setPhone(data.user.phone);
        setEmail(data.user.email);
        setFullName(data.user.fullName);
        setDateOfBirth(moment(data.user.birthday).format("YYYY-MM-DD"));
        setGender(data.user.gender);
        setDescription(data.description);
        setSpecialist(data.specialist);
        setKTPNumber(data.KTPNumber);
        setSIPNumber(data.SIPNumber);
        setSTRNumber(data.STRNumber);
        setWorkingExperience(data.workExperience);
        setServiceFee(data.serviceFee);
        setAvatar(data.user.avatar);
        setKtp(data.KTPFile);
        setSip(data.SIPFile);
        setStr(data.STRFile);
      })
      .then(setUpdateTeamsModal(true));
  };

模态

  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>
    );
  };

您对此问题/错误有任何解决方案吗？所有建议都会非常有帮助。顺便说一句，我正在使用 react-redux 进行状态管理。

【问题讨论】：

你能提供一个 MRE，用给定的实现很难说什么。
@BerkKurkcuoglu 抱歉我的解释不好，问题是当我第一次单击按钮时，Modal 为空（状态未更新）。但是当我第二次点击时，一切都很好（状态更新了）。
嗯，它可能与第一次或第二次点击无关，而是您在按钮点击时执行的异步操作，但同样很难在无法产生问题的情况下查明问题。
@BerkKurkcuoglu 是的异步，我也这么认为，如果你想看文件link

标签： javascript reactjs react-redux react-hooks

【解决方案1】：

您的handleUpdateTeams 函数调用dispatch 导致useSelector 中的myTeam 变量更新，但您的.then() 回调是使用myTeam 的旧值创建的闭包。所以你是根据旧的 Redux 状态而不是新的状态来设置你的组件状态。

您需要：

从dispatch的返回值中获取新的data值。
通过使用useEffect 挂钩和myTeam.userData 作为依赖项来响应myTeam.userData 中的更改。

作为旁注，拥有 26 个独立的状态是疯狂的。我想你可以在这里使用一些对象。

【讨论】：

好的，谢谢，是的，我需要做类似[state, setState] = useState({...}); 的操作来最小化各个状态
我按照您的所有步骤进行操作，并且有效。我需要将myTeam.userData 设置为依赖项，谢谢。