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

Question

I am trying to create Update Form Modal for edit the original data. My code actually works, but there is a bug which requires the button to be double-clicked to display data from API (getTeamsById()).

The Button

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

The Modal

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

Do you have any solution for this problem/bug?, all suggestions will be very helpful. By the way I am using react-redux for state management.

Answer 1

Your handleUpdateTeams function calls dispatch which causes the myTeam variable from useSelector to update, but your .then() callback is a closure created with the old value of myTeam . So you are setting your component states based on the old Redux state rather than the new state.

You need to either:

• Get the new data value from the return value of the dispatch .
• Respond to changes in myTeam.userData after they occur by using a useEffect hook with myTeam.userData as a dependency.

As a sidenote, having 26 individual states is crazy. I think you could use some objects here.