I am developing Insatgram like app. I'm running into the problem where I get a
"Uncaught (in promise) TypeError: Cannot read property 'params' of undefined"
I have a very similar component that takes an id from the url, using the same method, and it works fine. I'm confused as to why one is working and another isn't.
and also another Problem in Redirect to Other page I get a "this.props.history.push cannot read property 'props' of undefined" error displayed.
Follow.js:
import Popupfollower from '../Layout/Popupfollowfollower';
import React from 'react';
import axios from 'axios';
class follow extends React.Component {
constructor(props){
super(props)
this.state={
showfollowerPopup: false,
showfollowingPopup: false,
Follow:[]
}
}
togglePopfollower = (e) => {
this.setState({
showfollowerPopup: !this.state.showfollowerPopup
});
e.preventDefault();
};
togglePopfollowing = (e) => {
this.setState({
showfollowingPopup: !this.state.showfollowingPopup
});
e.preventDefault();
};
componentDidMount() {
var guid= this.props.match.params.id; - >>>This is Working Fine
var access_token = localStorage.getItem('access_token');
var username = localStorage.getItem('user');
// var guid= localStorage.getItem('Guiid');
axios.get('http://localhost:xxxx/Api/Authenticate/Getfollowingdetails'+'/'+ guid, { headers: { Authorization: access_token,Username:username } }).then(response => {
// console.log(response.data)
if(response.status=="200")
{
this.setState({
Follow:response.data
})
console.log(this.state.Follow)
}
})
.catch(function (error) {
alert("Your Session time expired.Please Login Again."+error);
this.props.history.push('/'); - >>>This is Not Working
})
}
render() {
return (
<div id="react-root">
<Helmet>
<meta charSet="utf-8" />
<title> Follower • Instagram</title>
<link rel="icon" href="/insta.ico" />
</Helmet>
<section className="_9eogI E3X2T">
<Header/>
<div></div>
<main className="SCxLW o64aR" role="main">
<div className="v9tJq VfzDr">
{
this.state.Follow.map((follow)=>{
return (
follow.length != 0?
<header className="vtbgv">
<div className="XjzKX">
<div className="RR-M-" role="button" tabIndex="0">
<canvas className="CfWVH" height="168" width="168" style={{ position: 'absolute', top: '-9px', left: '-9px', width: '168px', height: '168px' }}></canvas>
<span className="_2dbep " role="link" tabIndex="0" style={{ width: '150px', height: '150px' }}><img alt="" className="_6q-tv" src={require("../../img/Profile/"+follow.UserImage)} /></span>
</div>
</div>
<section className="zwlfE">
<div className="nZSzR">
<h1 className="_7UhW9 fKFbl yUEEX KV-D4 fDxYl ">{follow.Username}</h1>
<div className="Igw0E IwRSH eGOV_ _4EzTm">
<span className="BY3EC bqE32">
<span className="vBF20 _1OSdk">
<button className="_5f5mN -fzfL _6VtSN yZn4P ">Following</button>
</span>
</span>
</div>
<div className="AFWDX">
<button className="dCJp8 afkep">
<span aria-label="Options" className="sprite _horizontal__outline__24__grey_9 u-__7"></span>
</button>
</div>
</div>
<ul className="k9GMp">
<li className="Y8-fY ">
<span className="-nal3">
<span className="g47SY ">{follow.Post_count}</span>
posts
</span>
</li>
<li className="Y8-fY ">
<a className="-nal3" onClick={this.togglePopfollower} href="">
<span className="g47SY ">{follow.Follower_count}</span>{this.state.showfollowerPopup ? <Popupfollower toggle={this.togglePopfollower} /> : null}
followers
</a>
</li>
<li className="Y8-fY " >
<a className="-nal3" onClick={this.togglePopfollowing} href="">
<span className="g47SY ">{follow.Following_count}</span>{this.state.showfollowingPopup ? <Popupfollowing toggle={this.togglePopfollowing} /> : null}
following
</a>
</li>
</ul>
<div className="-vDIg">
<h1 className="">{follow.Fullname}</h1>
<a className="yLUwa" href="" rel="me nofollow noopener noreferrer" target="_blank">{follow.Website}</a>
</div>
</section>
</header>
:null
);
})
}
<div className="fx7hk">
<a href="" className="_9VEo1 T-jvg">
<span className="smsjF">
<div className="spritesave"></div>
<span className="PJXu4">Posts</span>
</span>
</a>
</div>
{
this.state.Follow.map((follow)=>{
return (
follow.length != 0?
<div className="_2z6nI">
<article className="ySN3v">
<div>
<div style={{ flexdirection: 'column', paddingbottom: '0px', paddingtop: '0px' }}>
<div className="Nnq7C weEfm">
<div className="v1Nh3 kIKUG _bz0w">
{
follow.UserPost.map(post =>{
return (
<a href="">
<div className="eLAPa">
<div className="KL4Bh">
<img alt="" className="FFVAD" decoding="auto" sizes="293px" src={require("../../img/Post/"+post.UploadFile)} style={{ objectfit: 'cover' }} />
</div>
<div className="_9AhH0"></div>
</div>
<div className="qn-0x" style={{ backgroundcolor: 'rgba(0, 0, 0, 0.3)', display: 'none' }}><ul className="Ln-UN"><li className="-V_eO"><span>114</span><span className="_1P1TY spriteheart"></span></li><li className="-V_eO"><span>1</span><span className="_1P1TY spritebubble"></span></li></ul></div>
</a>
);
})
}
</div>
</div>
</div>
</div>
</article>
</div>
:null
);
})
}
</div>
</main>
<Footer/>
</section>
</div >
)
}
}
export default follow
PopupFollower.Js
class Popupfollowfollower extends React.Component {
constructor(props){
var files;
super(props);
this.state = {
Follow:[]
}
}
handleClick = (e) => {
// this.props.history.push('/profile')
this.props.toggle();
e.preventDefault();
};
componentDidMount() {
this.follow();
}
follow= (e) => {
var guid= this.props.match.params.id; - >>>This is Not Working
var access_token = localStorage.getItem('access_token');
var username = localStorage.getItem('user');
//var guid= localStorage.getItem('Guiid');
axios.get('http://localhost:xxxx/Api/Authenticate/Getfollowfollowerdetails'+'/'+ guid, { headers: { Authorization: access_token,Username:username } }).then(response => {
if(response.status=="200")
{
this.setState({
Follow:response.data
})
console.log(this.state.Follow)
}
})
.catch(function (error) {
alert("Your Session time expired.Please Login Again."+error);
this.props.history.push('/'); - >>>This is Not Working
})
}
Follow(e,guid){
console.log(guid)
var id= localStorage.getItem('Guiid');
if(guid==id)
{
this.props.history.push('/follow/'+guid);
}else{
this.props.history.push('/follow/'+guid);
}
}
render() {
return (
<div className="RnEpo Yx5HN" role="presentation">
<div className="pbNvD fPMEg " role="dialog">
<div>
<div className="eiUFA">
<div className="WaOAr"></div>
<h1 className="m82CD">Follower</h1>
<div className="WaOAr">
<button className="wpO6b " type="button" onClick={this.handleClick}>
<svg aria-label="Close" className="_8-yf5 " fill="#262626" height="24" viewBox="0 0 48 48" width="24"><path clipRule="evenodd" d="M41.1 9.1l-15 15L41 39c.6.6.6 1.5 0 2.1s-1.5.6-2.1 0L24 26.1l-14.9 15c-.6.6-1.5.6-2.1 0-.6-.6-.6-1.5 0-2.1l14.9-15-15-15c-.6-.6-.6-1.5 0-2.1s1.5-.6 2.1 0l15 15 15-15c.6-.6 1.5-.6 2.1 0 .6.6.6 1.6 0 2.2z" fillRule="evenodd"></path>
</svg></button>
</div>
</div>
</div>
<div className=" Igw0E IwRSH eGOV_ vwCYk i0EQd ">
<div style={{ height: '356px', overflow: 'hidden auto' }}>
<div style={{ flexDirection: 'column', paddingBottom: '795px', paddingTop: '0px' }}>
{
this.state.Follow.map((follow)=>{
return (
follow.User.length != 0?
follow.User.map(record =>{
return (
<div className=" Igw0E rBNOH eGOV_ ybXk5 _4EzTm XfCBB HVWg4 ">
<div className=" Igw0E IwRSH eGOV_ _4EzTm yC0tu ">
<div className="RR-M- " role="button">
<canvas className="CfWVH" height="54" width="54" style={{ position: 'absolute', top: '-5px', left: '-5px', width: '54px', height: '54px' }}></canvas>
<a className="_2dbep qNELH kIKUG" href="" onClick={(e) => this.Follow(e,record.User_Guiid)}style={{ width: '44px', height: '44px' }}><img alt="mudasir_magry's profile picture" className="_6q-tv" src={require("../../img/Profile/"+record.UserImage)} /></a>
</div>
</div>
<div className=" Igw0E IwRSH YBx95 vwCYk ">
<div className=" Igw0E IwRSH eGOV_ _4EzTm ">
<div className="_7UhW9 xLCgt MMzan KV-D4 fDxYl ">
<a title="mudasir_magry" href="" onClick={(e) => this.Follow(e,record.User_Guiid)}>
<div className=" Igw0E IwRSH eGOV_ ybXk5 _4EzTm ">
<div className="_7UhW9 xLCgt qyrsm KV-D4 fDxYl rWtOq">
<div className=" Igw0E rBNOH eGOV_ ybXk5 _4EzTm ">{record.Username}
</div>
</div>
</div>
</a>
</div>
</div>
<div className=" Igw0E rBNOH YBx95 ybXk5 _4EzTm soMvl ">
<button className="sqdOP L3NKy y3zKF " type="button">Follow</button>
</div>
</div>
</div>
)
})
:null
)
})
}
</div>
</div>
</div>
</div>
</div>
)
}
}
export default Popupfollowfollower;
App.js
<Router>
<Switch>
<Route path='/follow/:id' component={Follow} />
<Route path='/popupfollowfollower' component={Popupfollowfollower} />
</Switch>
</Router>
