React属性返回为未定义
React属性返回为未定义
提问于 2019-05-11 16:37:33
我在React中创建了一个导航栏组件，并传入了一个JSON对象和一个简单的字符串作为道具：
<NavBar links={ navlinks } hello="hello" />;但是，我尝试调用组件中的props，但它们不起作用。
import React, { Component } from 'react'
import './BasicNavBar.css'
import 'font-awesome/css/font-awesome.min.css'
export class NavBar extends Component {
constructor(props) {
super(props);
this.state = {
hidden: false
};
}
toggleNav = (e) => {
e.preventDefault();
this.setState({
hidden: !this.state.hidden
});
};
render(){
console.log(this.props.links)
return(
<nav className="navbar">
<span className="nav-bar-toggle" id="js-navbar-toggle" onClick={this.toggleNav} >
<span className="nav-bar-toggle" id="js-navbar-toggle">
<i className="fa fa-bars"></i>
</span>
</span>
<a href="#" className="logo"></a>
<ul id="main-nav" className={ this.state.hidden ? 'active' : 'hidden' }></ul>
{
Object.keys(this.props.links).map(key => {
<li><a href="#" className="nav-links">{key}</a></li>
})
}
</nav>
)
}
}我尝试过this.props.hello和this.props.links，它们都是未定义的。我也尝试过返回props，但它返回的是一个空的JSON字符串。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-05-15 02:26:47
所以非常微妙的事情，我应该早点发现的！
Object.keys(this.props.links).map(key => {
<li><a href="#" className="nav-links">{ this.props.links[key] }</a></li>
}
);问题是我在{}而不是()中使用箭头函数。
{}意味着语句，因此我必须使用return，而不仅仅是语句。
我有两种方法来修复它：
Object.keys(this.props.links).map(key =>
<li><a href="#" className="nav-links">{ this.props.links[key] }</a></li>
);或
Object.keys(this.props.links).map(key => {
return <li><a href="#" className="nav-links">{ this.props.links[key] }</a></li>;
}
);我使用了()，因为我只有一条语句，所以它更简洁。
MSDN中的箭头函数：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
Stack Overflow用户
发布于 2019-05-11 17:11:41
您可以做的是，在执行.map()之前，首先检查this.props.links是否为真值。我打赌这里发生了一些异步逻辑，我们试图在它被传递之前访问你的道具。
import React, { Component } from 'react'
import './BasicNavBar.css'
import 'font-awesome/css/font-awesome.min.css'
export class NavBar extends Component {
constructor(props) {
super(props);
this.state = {
hidden: false
};
}
toggleNav = (e) => {
e.preventDefault();
this.setState({
hidden: !this.state.hidden
});
};
render(){
console.log(this.props.links)
return(
<nav className="navbar">
<span className="nav-bar-toggle" id="js-navbar-toggle" onClick={this.toggleNav} >
<span className="nav-bar-toggle" id="js-navbar-toggle">
<i className="fa fa-bars"></i>
</span>
</span>
<a href="#" className="logo"></a>
<ul id="main-nav" className={ this.state.hidden ? 'active' : 'hidden' }></ul>
{
this.props.links ? (
Object.keys(this.props.links).map(key => {
return <li><a href="#" className="nav-links">{key}</a></li>
})
) : (
<div></div>
)
}
</nav>
)
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56088620
复制相关文章
相似问题
腾讯云开发者
