Компонент рендеринга до обновления реквизита - React Redux

Question

Когда компонент монтируется, отправляется запрос на выборку данных (API). Компонент выполняет рендеринг до вызова этого действия, что вызывает неопределенную ошибку.

Я вполне уверен, что мне нужно реализовать какое-то состояние загрузки, но не могу заставить его работать.

Компонент:

class Profile extends Component {


  static propTypes = {
    auth: PropTypes.object.isRequired,
    games: PropTypes.array.isRequired,
    getGames: PropTypes.func.isRequired,
    deleteGame: PropTypes.func.isRequired,
    getUser: PropTypes.func.isRequired,
  };

  componentDidMount() {
    this.props.getUser(this.props.match.params.username);
    this.props.getGames(this.props.match.params.username);
  }

  render() {
    const { user } = this.props.auth;
    const queriedUser = this.props.queriedUser;
    const loadingQueriedUser = this.props.loadingQueriedUser;

    // Edit button
    const ownerLink = (
      <div>
        <button>EDIT</button>
      </div>
    );
    const guestLink = <div></div>;

    // if (loadingQueriedUser) {
    //   return <div>Loading...</div>;
    // }

    return (
      <Fragment>
        <div>
          <div className="row mt-2">
            <div className="col-1">
              <img
                className="rounded-circle account-img"
                style={{ height: 100 + "px", width: 100 + "px" }}
                src={queriedUser.profile.profile_image}
              ></img>
            </div>

Действие:

  //  GET USER
  export const getUser = (username) => (dispatch, getState) => {

// Loading query
  dispatch({ type: LOADING_QUERIED_USER });

  axios
    .get(`/api/users/${username}`, tokenConfig(getState))
    .then((res) => {
      dispatch({
        type: GET_USER,
        payload: res.data,
      });
    })
    .catch((err) => {
      dispatch(returnErrors(err.response.data, err.response.status));
      dispatch({
        type: AUTH_ERROR,
      });
    });
  };

Answer 1

В вашем возвращаемом выражении укажите

return (
  queriedUser &&
  // Rest of your code...
)

Теперь элемент будет отображаться только после загрузки вашего queriedUser объекта.

Answer 2

Привет простой пример

 if (!data)
    return <Loader  />;
  else
    return (
{{data}}
)