如何在反应钩子中调用多个函数

Question

在这里，我正在使用调用模态，当用户单击特定按钮时，它将显示一个多下拉按钮，在更新按钮时，它将调用模态询问原因，用户将插入一些数据，它将更新。我正在使用反应钩子。

1.主要.js

用于更新多个按钮

const toggleMachine = (currentState, action) => {
const nextState = machine.transition(currentState, action);
if (currentState !== nextState.value) {
send(ProjectStatus[nextState.value]);
dispatch(updateTask({ ...projectEntity, status: ProjectStatus[nextState.value] }));
}
};

....

<MachineModal
onClose={() => setOpen(false)}
open={open}
onSubmit={() => toggleMachine(currentState)}
/>

2.机器模式.js

根据 id 获取任务详细信息

useEffect(() => {
const getId = params.id;
TaskHistoryApi.getTaskHistory(getId).then((response) => {
setValues(response.data);
})
.catch((error) => {
Notifier.error(error.response.data.title);
});
}, []);

用于更新 TSSK

const updateTaskHistory = (e) => {
e.preventDefault();
const data = {
...
};
TaskHistoryApi.updateTaskHistories(data)
.then((response) => {
Notifier.success('Task History Updated Successfully');
onClose();
})
.catch((error) => {
Notifier.error(error.response.data.title);
});
};
<Dialog
open={open}
onClose={onClose}
aria-labelledby="form-dialog-title"
fullWidth
>
<DialogTitle>
Update Task History

</DialogTitle>
<DialogContent>
<TextField
margin="dense"
type="text"
label="Project ID"
fullWidth
name="projectId"
onChange={onChange}
value={values.projectId}
disabled
/>
<TextField
autoFocus
margin="dense"
type="text"
label="Comment"
fullWidth
name="eventDetail"
onChange={onChange}
value={values.eventDetail}
/>
</DialogContent>
<DialogActions>
<Button
onClick={onClose}
color="primary"
variant="contained"
>
Cancel
</Button>
<Button
onClick={updateTaskHistory}
color="primary"
variant="contained"
>
Submit
</Button>
</DialogActions>
</Dialog>

我必须更新任务历史记录以及其他内容，因此两者都需要同时更新，反之亦然，目前，它仅更新模态组件而不是主要组件.js

Answer 1

您可以使用在第一个状态更改时执行的效果钩子。

例如，当任务历史记录更改时更新"其他内容"。

useEffect(() => {
//All functions that need to be triggered when 
// "StateThatShouldTriggerThisEffect" changes
}, ["StateThatShouldTriggerThisEffect"])