我正在使用React类型脚本NodeJS mySQL与Redux和建设一个假期规划项目。我需要显示所有的假期通过卡,并需要有不同的元素卡上,如果它是一个管理员或用户。
我使用useState来获取用户状态,每当我想从用户那里提取数据时,我都会得到一个错误。在UserModel中的roleId处,我有RoleModel(enum,'admi'= 1,'user'= 2)。示例-VacationCard(props):
import { useEffect, useState } from "react";
import { NavLink } from "react-router-dom";
import UserModel from "../../../Models/UserModel";
import VacationModel from "../../../Models/VacationModel";
import { authStore } from "../../../Redux/AuthState";
import appConfig from "../../../Utils/Config";
import "./VacationCard.css";
interface VacationCardProps {
vacation: VacationModel;
}
function VacationCard(props: VacationCardProps): JSX.Element {
// let users: UserModel = authStore.getState().user;
const [user, setUser] = useState<UserModel>();
useEffect(() => {
setUser(authStore.getState().user);
const unsubscribe = authStore.subscribe(() => {
setUser(authStore.getState().user);
});
return () => unsubscribe();
}, []);
return (
<div className="VacationCard">
<div>
{/* {user.roleId === 2} */}
Destination: {props.vacation.destination}
<br />
Description: {props.vacation.description}
<br />
Check In: {props.vacation.checkIn}
<br />
Check Out: {props.vacation.checkOut}
<br />
Price: {props.vacation.price}
<br />
{user.roleId === 2 && <>Followers: {props.vacation.followersCount}</>}
{/* {users.roleId === 2 && <>Followers: {props.vacation.followersCount}</>}
*/}
</div>
<div>
<img crossOrigin="anonymous" src={appConfig.vacationImagesUrl +
props.vacation.imageName} />
</div>
</div>
);
}
export default VacationCard;
第一种方式的useState和user给我一个错误,但另一种方式的user:UserModel工作。我应该保持useState或其他方式?
谢谢大家!
1条答案
按热度按时间e4eetjau1#
首先,我会将任何与auth数据相关的逻辑提取到它自己的自定义React钩子中,并在组件中使用它从该数据中获取用户状态。然后,您可以基于用户状态值执行条件呈现。这将有助于从组件中提取所有有状态逻辑,并保持它的纯净和无副作用。