为什么需要单击两次才能更新状态?(React.js，React Hooks)

Question

我正在尝试创建更新表单模式来编辑原始数据。我的代码确实有效，但有一个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>

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

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

你有解决这个问题/bug的办法吗？，所有的建议都会很有帮助。顺便说一下，我正在使用react redux进行状态管理。

Answer 1

handleUpdateTeams函数调用dispatch，这会导致useSelector中的myTeam变量更新，但.then()回调是用myTeam的旧值创建的闭包。因此，您将基于旧的Redux状态而不是新的状态来设置组件状态。

您需要：

• 从dispatch的返回值中获取新的data值
• 使用myTeam.userData作为依赖项的useEffect挂钩，在之后响应myTeam.userData中的更改

顺便说一句，拥有26个单独的状态是疯狂的。我想你可以在这里使用一些物品。