API вызывается несколько раз внутри componentDidMount

Question

Я написал метод, описанный ниже, но заметил, что мой API вызывается несколько раз. Я вызываю мой API внутри componentDidMount ().

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

Как я могу преодолеть это?