ReactJS |Проверьте, существует ли пользователь из match.params

Question

Я пытаюсь проверить, существует ли пользователь, по URL-адресу match.params. По сути, я хочу перенаправить пользователя на страницу 404, если URL: /user/username, не существует.

Я хочу проверить, существует ли этот параметр в моем списке пользователей из API.

Вот код, который работает, но я точно знаю, что это неправильно. Не знаю, почему это работает. Я со вчерашнего дня, и не могу заставить его работать. Пожалуйста, помогите.

Код компонента:

  static propTypes = {
    match: PropTypes.shape({
      isExact: PropTypes.bool,
      params: PropTypes.object,
      path: PropTypes.string,
      url: PropTypes.string
    }),
    // eslint-disable-next-line react/forbid-prop-types
    history: PropTypes.object,
    label: PropTypes.string,
    actualValue: PropTypes.string,
    callBack: PropTypes.func
  };

  state = {
    user: {},
    error: ''
  };

  componentDidMount() {
    this.fetchUser();
  }

  getUserUsername = () => {
    const { match } = this.props;
    const { params } = match;
    return params.username;
  };

  fetchUser = () => {
    getUser(this.getUserUsername()).then(username => {
      this.setState({
        user: username.data
      }).catch(({ message = 'Could not retrieve data from server.' }) => {
        this.setState({ // catch statement return undefined.
          user: null,
          error: message
        });
      });
    });
  };

  validateUsername = username => // This one is undefined
    listUsers().then(({ data }) => { // Data are coming just fine
      debugger;
      if (data.includes(username)) {
        return true;
      }
      return false;
    });

По сути, вся ошибка проверки страницы испорчена. Я нуждаюсь в помощи. Вот код для служб listUsers() и getUser(), которые вызывают конечную точку и сами возвращают обещание.

export const listUsers = () => {
  const options = {
    method: httpMethod.GET,
    url: endpoint.LIST_USERS
  };
  return instance(options);
};

export const getUser = username => {
  const options = {
    method: httpMethod.GET,
    url: endpoint.GET_USER(username)
  };
  return instance(options);
};

Я получаю эту ошибку для оператора catch: TypeError: Cannot read property 'catch' of undefined at Object.then.username.

После нескольких попыток я сделал это, и, похоже, работает, но все еще не уверен:

  validateUsername = () =>
    listUsers().then(({ data }) => {
      debugger;
      const { match } = this.props;
      console.log(data, 'data');
      console.log(match, 'match');
      if (data.includes(match.params.username)) {
        return true;
      }
      return false;
    });

Answer 1

Catch должно быть после , затем закрывающих скобок, а не после setState скобок, для начала Δημήτρη!:

fetchUser = () => {
  getUser(this.getUserUsername())
    .then(username => {
      this.setState({
        user: username.data
      });
    })
    .catch(({ message = "Could not retrieve data from server." }) => {
      this.setState({
        // catch statement return undefined.
        user: null,
        error: message
      });
    });
};