Question

这里我使用的是调用Modal，当用户单击特定按钮时，它将显示一个多个下拉按钮，而在更新按钮时，它将调用Modal询问原因，并且用户将插入一些数据并将更新。 我正在使用React Hooks。

1.Main.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。 MachineModal.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>

我必须同时更新任务历史记录，因此都需要同时更新，反之亦然，目前，它仅更新Modal组件而不是Main.js

Answer 1

您可以使用效果挂钩在第一个状态改变时执行。

例如，在任务历史记录更改时更新“其他资料”。

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

如何在React挂钩中调用多个函数

1 个答案: