javascript - ReactJS |从 match.params 检查用户是否存在

Question

我正在尝试从 URL match.params 检查用户是否存在。基本上，我想将用户重定向到 404 页面，如果 URL:/user/用户名，不存在。

我想检查该参数是否存在于我的来自 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;
    });

基本上，页面的整个错误验证都被搞砸了。我需要帮助。以下是调用端点并返回 Promise 的 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 应该位于 then 右括号之后，而不是 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
      });
    });
};