API在componentDidMount内部被多次调用

Question

我已经编写了如下方法，但是我注意到我的API被多次调用。 我正在componentDidMount（）中调用我的API。

class User extends Component {
  state = {
    cardData: [],
  };

  userDetails = async () => {
    const data = await fetchUserDetails();
    if (data) {
      const url = data.baseUrl;
      const getDetails = Object.values(data).map((users) => users.user);
      this.setState({ cardData: getDetails });
    }
  };

  componentDidMount() {
    this.userDetails();
  }
}

我该如何克服？