I have a page in which I have a return like:
const MyPage1 = ({holiday, holidayStatus}) => {
// in Render I check some conditions to show or another component or a page:
const Render = () => {
if ((holidayStatus === 'APPROVED' || holidayStatus === 'REJECTED' || holidayStatus === 'DELETED') && Object.keys(holiday).length > 0){
return (
<>
<RenderDetail />
</>
)}
else if ((holidayStatus === 'WAITING' || holidayStatus === 'DRAFT') && Object.keys(holiday).length > 0) {
return (
<>
<EditRequest holiday={holiday}/>
</>
)}
else {
return(
<>
<RenderSpinner />
</>
)
}
}
return (
<>
<Render />
</>
)
}
const mapStateToProps = (state) => {
return {
holiday: state.holiday.holidayInfo,
holidayStatus: state.holiday.holidayInfo.status,
}
}
const mapDispatchToProps = (dispatch) => ({
getHolidayInfo: (payload) => dispatch(getHolidayInfo(payload)),
})
Where EditRequest is a newPage while RenderDetail is a component inside the same page.
Now my problem is that every time I change from RenderDetail to EditRequest (or the same for the opposite) the application show for a second the RenderDetail and then show EditRequest.
In your opinion how can I do to fix this problem?
CodePudding user response:
You can resolve this by adding switch
statement. Because first it checks the statement then execute.
But in if/else
statement code check both if if
is false first it check if then it goes to else
If you prefer to do with if
statement the removes else if
use only if
statement it can resolve your issue.
As,
const MyPage1 = ({holiday, holidayStatus}) => {
// in Render I check some conditions to show or another component or a page:
const Render = () => {
if ((holidayStatus === 'APPROVED' || holidayStatus === 'REJECTED' || holidayStatus === 'DELETED') && Object.keys(holiday).length > 0){
return (
<>
<RenderDetail />
</>
)}
if ((holidayStatus === 'WAITING' || holidayStatus === 'DRAFT') && Object.keys(holiday).length > 0) {
return (
<>
<EditRequest holiday={holiday}/>
</>
)}
else {
return(
<>
<RenderSpinner />
</>
)
}
}
return (
<>
<Render />
</>
)
}
const mapStateToProps = (state) => {
return {
holiday: state.holiday.holidayInfo,
holidayStatus: state.holiday.holidayInfo.status,
}
}
const mapDispatchToProps = (dispatch) => ({
getHolidayInfo: (payload) => dispatch(getHolidayInfo(payload)),
})
CodePudding user response:
The problem is the if's that you use, you must to consider to use switch in this case.
const MyPage1 = ({ holiday, holidayStatus }) => {
const Render = () => {
if (Object.keys(holiday).length > 0) {
switch (holidayStatus) {
case 'APPROVED': case 'REJECTED': case 'DELETED':
return <RenderDetail />
case 'WAITING': case 'DRAFT':
return <EditRequest holiday={holiday} />
default:
break;
}
}
return <RenderSpinner />
}
return <Render />
}
const mapStateToProps = (state) => {
return {
holiday: state.holiday.holidayInfo,
holidayStatus: state.holiday.holidayInfo.status,
}
}
const mapDispatchToProps = (dispatch) => ({
getHolidayInfo: (payload) => dispatch(getHolidayInfo(payload)),
})
The code looks cleaner too