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

如果state.shop使用短路評估undefined則返回一個空數組：

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

Answer 3

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