javascript - “警告:无法在已卸载的组件上执行React状态更新”，没有状态

Question

我正在研究Reactjs项目，但出现错误：“警告：无法在已卸载的组件上执行React状态更新。这是空操作，但是它表明您的应用程序中存在内存泄漏。要解决，取消componentWillUnmount方法中的所有订阅和异步任务。”

我已经查看了其他经常涉及setState的主题和答案，除了我的代码中没有状态之外。

错误控制台：

index.js:1437 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in Mutation (created by Connect(Mutation))
    in Connect(Mutation) (at DoneButton.js:43)
    in Unknown (created by WithStyles(Component))
    in WithStyles(Component) (created by Context.Consumer)
    in translate(WithStyles(Component)) (at OrderEdit.js:63)

这是我的代码：

const OrderEditToolbar = withStyles(toolbarEditStyles)(
  ({
    basePath,
    classes,
    handleSubmitWithRedirect,
    invalid,
    record,
    resource,
    saving,
    onCancel,
    after
  }) => {
    return (
      <MuiToolbar className={classes.toolbar}>
        {record.status === "todo" && (
          <InProgressButton
            record={record}
            resource="order"
            after={after}
            label="resources.order.action.accept"
          />
        )}
        {record.status === "inProgress" && (
          <DoneButton
            record={record}
            resource="order"
            after={after}
            label="resources.order.action.done"
          />
        )}
        <SaveButton
          handleSubmitWithRedirect={handleSubmitWithRedirect}
          invalid={invalid}
          saving={saving}
          redirect="list"
          submitOnEnter={true}
        />
        <CancelButton onClick={onCancel} />
        <DeleteButton
          undoable={true}
          className={classes.delete}
          basePath={basePath}
          record={record}
          resource={resource}
        />
      </MuiToolbar>
    );
  }
);

自从我在“进行中”和“完成”模式下下单时更新了订单日期以来，就出现了此错误，但我不知道如何解决。

编辑为trixn：

DoneButton代码：

const sideEffects = {
  refresh: true,
  undoable: true,
  onSuccess: {
    notification: {
      body: "resources.order.notification.doneSuccess",
      level: "info"
    }
  },
  onFailure: {
    notification: {
      body: "resources.order.notification.doneError",
      level: "warning"
    }
  },
  callback: ({ payload, requestPayload }) => {
    console.log(payload);
    if (typeof payload.after === "function") payload.after();
  }
};

const DoneButton = withStyles(buttonStyle)(
  ({ classes, record, resource, translate, after, label }) =>
    record && record.status === "inProgress" ? (
      <Mutation
        type="UPDATE"
        resource={resource}
        payload={{
          id: record.id,
          data: { status: "done" },
          after: after
        }}
        options={sideEffects}
      >
        {action => (
          <Button
            variant="raised"
            color="primary"
            className={classes.cssRoot}
            // size="small"
            onClick={action}
          >
            <Done
              color="primary"
              style={{ paddingRight: "0.5em", color: "white" }}
            />
            {label ? translate(label) : "Done"}
          </Button>
        )}
      </Mutation>
    ) : (
      <span />
    )
);

DoneButton.propTypes = {
  record: PropTypes.object,
  translate: PropTypes.func
};

Answer 1

下面的代码对我有用，似乎您正在尝试在尚未呈现DOM时执行某些操作

componentDidMount() {
    this.mounted = true;
    Get(ROLE_API).then(res => {
      if (this.mounted) {
        this.setState({roleList: res.data});
      }
    });
  }

  componentWillUnmount() {
    this.mounted = false;
  }

因此，我将在 componentDidMount中检入是否安装了我的组件，我将调用API。试试这个看看它是否对你有用