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

Question

我正在尝试创建更新表单模式以编辑原始数据。 我的代码实际上可以工作，但是有一个错误需要双击按钮才能显示来自 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 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 进行 state 管理。

Answer 1

您的handleUpdateTeams function 调用dispatch会导致来自useSelector的myTeam变量更新，但您的 .then .then()回调是使用myTeam的旧值创建的闭包。 因此，您正在根据旧的 Redux state 而不是新的 state 设置组件状态。

您需要：

• 从dispatch的返回值中获取新的data值。
• 通过使用带有myTeam.userData作为依赖项的useEffect挂钩，对myTeam.userData中的更改进行响应。

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