我是个新手,下面是一个组件的状态和渲染方法,该组件必须基于“ item.full_name”显示this.state.numberOfStarList的数据, 但我遇到错误-无法读取未定义的属性“状态”
this.state = {
error: null,
isLoaded: false,
numberOfStarList: [],
objectDetails: []
};
render() {
return (
<div className="container">
{this.state.objectDetails.map(function(item) {
return (
<div className="col-md-6" key={item.full_name}>
<div className="card">
<img
className="card-img-top"
src={item.loggedInAvatar_url}
alt="user"
/>
<div className="card-body">
<a
className="card-title"
href={item.html_url}
target="_blank"
>
<span>{item.full_name}</span>
</a>
<br />
<a
className="card-text"
href={item.loggedInHtmlUrl}
target="_blank"
>
<span>{item.loggedInOwner}</span>
</a>
</div>
</div>
{this.state.numberOfStarList.map(function(star){
return (
<h1>{star.key}</h1>
)
})}
</div>
)
})}
</div>
);
答案 0 :(得分:0)
因为您应该在构造函数中定义状态,并将其绑定到函数中,如下所示:
constructor(props){
super(props);
this.state = {
error: null,
isLoaded: false,
numberOfStarList: [],
objectDetails: []
};
}
render() {
return (
<div className="container">
{this.state.objectDetails.map((item) => {
return (
<div className="col-md-6" key={item.full_name}>
<div className="card">
<img
className="card-img-top"
src={item.loggedInAvatar_url}
alt="user"
/>
<div className="card-body">
<a
className="card-title"
href={item.html_url}
target="_blank"
>
<span>{item.full_name}</span>
</a>
<br />
<a
className="card-text"
href={item.loggedInHtmlUrl}
target="_blank"
>
<span>{item.loggedInOwner}</span>
</a>
</div>
</div>
{this.state.numberOfStarList.map((star) => {
return (
<h1>{star.key}</h1>
)
})}
</div>
)
})}
</div>
);
答案 1 :(得分:0)
我相信您的困惑可能是由于可以通过两种方式声明状态。
然后,您需要使用this
。
class Foo extends Component {
constructor(props) {
// this is important as it makes other methods access props like `this.props...`
super(props);
this.state = {
error: null,
isLoaded: false,
numberOfStarList: [],
objectDetails: []
}
}
render () {...}
}
如果您将state
声明为类实例变量(在构造函数之外),
那么您就不需要this
。
class Foo extends Component {
state = {
error: null,
isLoaded: false,
numberOfStarList: [],
objectDetails: []
}
render () {...}
}
要点是,如果要在构造函数外部声明state
,则不需要this
。
如果使用的是webpack,则需要Babel插件babel-plugin-transform-class-properties,以启用类实例变量的转换。