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;

商店行动.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
})})
}

商店减速器.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

如果使用短路计算undefinedstate.shop则返回一个空数组：

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

Answer 3

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