React Router and this.props：this.props.location.state is undefined
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React Router and this.props：this.props.location.state is undefined相关的知识，希望对你有一定的参考价值。
我正在个人项目中使用React Router，以便创建导航菜单并进行导航。我试图将状态从我的APP组件传递到“导航菜单”组件，然后传递到每个部分的组件，但我碰壁了，我不知道为什么...
分别是我的App组件，导航菜单组件和Dealers组件的代码（Dealers是菜单中可用的部分，单击Dealer的按钮。
应用组件
import React from 'react';
import BrowserRouter as Router, Switch, Route from 'react-router-dom';
import './App.css';
import NavMenu from '../NavMenu/NavMenu';
import Dealers from '../Dealers/Dealers';
import About from '../About/About';
import Home from '../Home/Home';
import LogoHeartbeat from './heartbeat_logo.png';
import LogoLoveVinyl from './lvlogo.jpg';
import Discogs from '../../util/Discogs/Discogs';
class App extends React.Component
constructor(props)
super(props);
this.state=
recoDetails:[],
objectToRender:[],
searchResults:[],
dealersDb:[
name: 'Heartbeat Vinyl',
location: 'Paris',
address: '26 Rue Godefroy Cavaignac',
open: 'from 12 pm to 8pm',
holiday: 'Sunday',
description:"Heartbeat Vinyl is a very cosy shop, offering a wide range of music. You'll find Jazz, Disco, House, Techno, Rock, Ambient, Soul, Funk, etc... One thing is sure, you can expect quality music from the owner Melik!",
url: 'http://www.heartbeatvinyl.com/',
logo: LogoHeartbeat,
genre: ['Jazz','Rock','Disco','Funk','House','Japanese','Techno','Ambient'],
id:'1',
reco:['15179807','3447244','1559040'],
recoInfo:[],
video:[
'https://www.youtube.com/embed/Zg1aJ0fhF2I',
'https://www.youtube.com/embed/_C9ZNqNXODk',
'https://www.youtube.com/embed/pgeTFQM1HV0',
'https://www.youtube.com/embed/2ZJlYZEzYY0'
]
,
name: 'Love Vinyl',
location: 'London',
address: '5 Pearson Street',
open: 'from 11:30 am to 7pm',
holiday: 'Monday',
description:"Love Vinyl is an incredibly good record shop, offering a wide range of music. You'll find Jazz, Disco, House, Techno, Rock, Ambient, Soul, Funk, etc... One thing is sure, you can expect quality music from the owner Zaf!",
url: 'https://www.lovevinyl.london/',
logo: LogoLoveVinyl,
genre: ['Jazz','Rock','Disco','Funk','House','Techno','Punk','Mods'],
id:'2',
reco:['2903013','1038746','13670323'],
recoInfo:[]
]
;
this.search=this.search.bind(this);
this.changeState=this.changeState.bind(this);
this.getRecoDetails=this.getRecoDetails.bind(this);
search(term)
this.setState(
searchResults: []
);
let tempArray= [];
this.state.dealersDb.map(dealer=>
if(term===dealer.name || term===dealer.location || dealer.genre.find(element=>term===element))
tempArray.push(dealer);
this.setState(
searchResults: tempArray
)
);
changeState(term)
let idToRender=[];
this.state.dealersDb.map(dealer=>
if(term===dealer.id)
idToRender=[dealer];
);
let recoToFind=idToRender[0].reco;
recoToFind.map(item=>
Discogs.search(item).then(response=>
if(idToRender[0].recoInfo.length<recoToFind.length)
idToRender[0].recoInfo.push(response)
this.setState(
objectToRender: idToRender
);
)
)
getRecoDetails(id)
Discogs.search(id).then(response=>
this.state.recoDetails.push(response)
return(
this.setState(recoDetails: this.state.recoDetails
)));
render()
return(
<Router>
<div className="App">
console.log(this.state.dealersDb)
<NavMenu dealers=this.state.dealersDb show=this.state.objectToRender getId=this.changeState searchResults=this.state.searchResults search=this.search/>
<Route path='/' exact component=Home/>
<Route path='/Dealers' component=Dealers/>
<Route path='/About' component=About/>
</div>
</Router>
);
export default App;
这里是NavMenu组件
import React from 'react';
import './NavMenu.css';
import Dealers from '../Dealers/Dealers';
import Home from '../Home/Home';
import Link from 'react-router-dom';
class NavMenu extends React.Component
render()
return(
<ul className="navigation">
<Link to="/" exact>
<button className="home button" onClick=<Home/>>Home</button>
</Link>
<Link to=
pathname:'/Dealers',
state:
dealers: this.props.dealers,
show:this.props.show,
getId:this.props.getId,
searchResults:this.props.searchResults,
search:this.props.search,
>
console.log(this.props.dealers)
<button className="dealr button" onClick=<Dealers/>>Dealers</button>
</Link>
<Link to="/VideoArchives">
<button className="videoArchives button">Video Archives</button>
</Link>
<Link to="/About">
<button className="aboutUs button">About us</button>
</Link>
</ul>)
export default NavMenu;
这里是经销商部分
import React from 'react';
import SearchBarDealers from '../SearchBarDealers/SearchBarDealers.js';
import SearchDealersResults from '../SearchDealersResults/SearchDealersResults';
import DealerDetailsList from '../DealerDetailsList/DealerDetailsList';
import './Dealers.css';
class Dealers extends React.Component
render()
return(
<div>
console.log(this.props.location)
<div className="OriginalComponents">
<SearchBarDealers onSearch=this.props.location.state.search/>
<div className="MainContainer">
<div className="SDResults">
<SearchDealersResults data=this.props.location.state.searchResults getId=this.props.location.getId/>
</div>
<div className="DDList">
<DealerDetailsList show=this.props.location.state.show/>
</div>
</div>
</div>
</div>
);
export default Dealers;
我在Google上度过了好几个小时，似乎我在声明所有内容，但当我在Dealers组件中console.log this.props.location时，它返回：
pathname: "/Dealers", search: "", hash: "", state: undefined
hash: ""
pathname: "/Dealers"
search: ""
state: undefined
因此，这意味着在上一步中未正确记录状态。我的NavMenu中的this.props.dealers的console.log返回期望值，所以这意味着当我声明：
<Link to=
pathname:'/Dealers',
state:
dealers: this.props.dealers,
show:this.props.show,
getId:this.props.getId,
searchResults:this.props.searchResults,
search:this.props.search,
>
console.log(this.props.dealers)
<button className="dealr button" onClick=<Dealers/>>Dealers</button>
</Link>
每个状态值应分配一个适当的值。但是不知何故，它似乎没有按预期运行...
有人可以帮我这个忙吗？ ^^;我在这里错了吗？
答案
为了使react-router个道具（状态，位置等）可用，您需要用withRouter包裹组件>
import withRouter from 'react-router-dom'
...
export default withRouter(Dealers);
以上是关于React Router and this.props：this.props.location.state is undefined的主要内容，如果未能解决你的问题，请参考以下文章
`yarn add react-router-dom` 和 `yarn add @types/react-router-dom` 有啥区别？