javascript - 获取未定义的道具 - React JS
问题描述
我正在使用 React JS 和 React 路由器。
我有 2 节课:
- 应用程序.js
- SomeClass.js
在 App.js 中:
class App extends React.Component{
constructor(props){
super(props);
this.state = {
token: "",
auth: false
};
}
render(){
return(
<Router>
<Switch>
<Route exact path="/anotherendpoint" component={() => <SomeOtherComponent auth={this.state.auth} token={this.state.token} />} />
<Route path="/someendpoint/abc" exact component={() => <SomeClass auth={this.state.auth} token={this.state.token} />} />
</Switch>
</Router>
);
}
}
export default App;
在 SomeClass.js 中:
class SomeClass extends React.Component{
constructor(props){
super(props);
}
logout = () =>{
console.log('token: ', this.props.token); //getting token: undefined
let myCookie = document.cookie;
console.log("cookie: ", myCookie); //getting cookie: undefined
}
}
export default Nav;
在 SomeClass 类中,每当我执行 this.props.token 时,我都会得到 undefined
此外,当我 console.log(document.cookie) 时,我得到未定义
该问题仅出现在 SomeClass 组件中。这背后的原因是什么?
为什么道具未定义。
谢谢。
解决方案
您以错误的方式将道具传递给组件。只需像这样向组件添加道具:
component={() => <SomeComponent auth={this.state.auth} token={this.state.token} />}
推荐阅读
- python - 通过使用 python 中的 sys 库在终端中将文件位置和文件名作为参数传递来保存 matplotlib 图
- java - JVM 代码缓存超过 ReservedCodeCacheSize
- r - 删除R中多个变量中的字符串
- asp.net-core-webapi - 如何从 HttpContent 检索 JSON 数据
- postgresql - Postgres NOT IN 无法按预期工作
- angular - Angular dom-to-image 如何连续加载图像?
- highcharts - 防止 Highchart.js 切割 xAxis 标签
- python - 如果进程已经在运行,Python-Flask 设置队列
- r - 如何使用 AnnotationHub 或 R 中的类似方法注释与参考基因组的基因相关的感兴趣的基因组区域?
- identityserver4 - Identityserver4 和 Redis 缓存不是线程安全的?