React рендерит мой компонент до того, как на самом деле он будет иметь данные

Question

Так что я сильно застрял в этой проблеме ... обычно я просто делал бы "ComponentDidMount", но так как я стараюсь избегать использования классов и использовать только ловушки реакции, я застрял с проблемой.

Мой компонент обрабатывается до того, как он получает какие-либо данные от API, поэтому моя функция .map не будет работать, поскольку не получает никаких данных.

Магазин. js

import React, { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { listShops } from "../../Redux/actions/shopActions";

const Shop = () => {
  const userShop = useSelector(state => state.shop);
  const auth = useSelector(state => state.auth);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(listShops(auth));
  }, []);

console.log("Look at my userShop",userShop.shop)
  return (
      <div>
       {userShop.map(shop=>(<div>{shop}</div>))}
              {console.log("How often do I Render?")}
    </div>
  );
};

export default Shop;

ShopAction. js

import {GET_SHOPS} from "./types";

export const listShops = userData => async dispatch =>{
    const userId = userData.user.id;
    await axios.get(`/api/shops/shops/user/${userId}`)
    .then(
        res => {
        const user = res.data;
        dispatch({
            type: GET_SHOPS,
            payload: user.shops
        })})
}

shopReducer. js

const initialState = {}

export default function(state = initialState, action) {
    switch (action.type) {
      case GET_SHOPS:
        return {
            ...state,
            shop:action.payload
        }
      default:
        return state;
    }
  }

Answer 1

if(!userShop){
   return <h1>loading<h1>;
 }
 return (
     <div>
      {userShop.map(shop=>(<div>{shop}</div>))}
   </div>
 );

Answer 2

return (
     <div>
      {userShop && userShop.map(shop=>(<div>{shop}</div>))}
   </div>
 );

Answer 3

Возвращает пустой массив, если state.shop равно undefined, используя оценку короткого замыкания :

const userShop = useSelector(state => state.shop || []);