為什么需要點擊兩次才能更新 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 個獨立的州是瘋狂的。 我想你可以在這里使用一些對象。