Twice componentdiMount is getting called (c#-MVC ,react and external babel.js )
In my project, for few old modules, we are still using external babel.js file
So basically we are integrating c#-MVC, react
I am dividing the question into three parts ,
- Layout Page C#
_ListLayoutV2.chtml side I have one page , through which I am including babel.js
<script src="https://cdn/ajax/libs/babel-standalone/6.26.0/babel.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
- List Page C#
On List page I am including one CarContainer.jsx file
The List page looks like this ,
@using Domain.Vault;
@{
ViewBag.Title = @Resource.CarList;
Layout = "~/Views/Shared/_ListLayoutV2.cshtml";
SiteContext siteContext = WebUtils.GetSiteContext(new HttpContextWrapper(HttpContext.Current));
}
@Html.Hidden("hdnGotIt", Resource.GotIt)
@section sectionMain
{
<script type="text/jsx" src="~/Scripts/Area/Travel/Car/CarContainer.jsx">
</script>
<div id="main"></div>
}
@section sectionRightSide
{
@Html.Hidden("hdnDomainUrl", "https://" + Request.Url.Authority)
}
- React Side react
const BLUE_TEXT_COLOR = "#31a8dc";
var completeRecordCount = 0;
const REQ_ID = "requestID";
let isfetchInProcess = true;
class CarContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
isDataLoaded: false,
cardata: { content: [] },
carMatrixData: [],
isLoading: true,
currentPage: 1,
pageSize: 20,
totalPage: 1,
carFilter: [],
carResponses: {},
brandSort: [{ 'type': 'price', 'order': 'asc' }],
priceHeaderSelected: false,
nonFilteredRecordCount: 0,
filterType: 'none',
searchType: 'Airport',
cacheInterval: [],
resultCount: 0,
isMoreResultsAvailable: true,
};
this.payLaterInterval = 0;
this.payLaterCount = 0;
}
componentDidMount() {
$('body').addClass('car-list-page');
if (location.href.indexOf("requestID=0") > 0) {
//this.searchCarFromList();
}
else {
console.log('componentDidMount')
// this.loadLegResults();
}
}
componentDidUpdate() {
}
render() {
return (
<React.StrictMode>
Hello
</React.StrictMode>
);
}
}
const containerElement = document.getElementById("main");
ReactDOM.render(<CarContainer />, containerElement);
The screenshot of the chrome browser
How can we solve this, so we can call componentdiMount only once
Top comments (0)