Я разрабатываю приложение типа Insatgram. Я столкнулся с проблемой, когда получаю
"Uncaught (в обещании) TypeError: невозможно прочитать свойство 'params' of undefined"
У меня очень аналогичный компонент, который берет идентификатор из URL-адреса, используя тот же метод, и он отлично работает. Я не понимаю, почему один работает, а другой нет.
, а также еще одна проблема с перенаправлением на другую страницу. Я получаю сообщение «this.props.history.pu sh не может прочитать свойства» отображается ошибка 'of undefined ".
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>