javascript - 无法解析对象数组
问题描述
我无法在反应中解析来自服务器的答案。
componentWillMount(){
getSliderGames().then(res => {
this.setState({slider_games: res})
})
}
答案如下
答案很好,但我无法解析她。有错误:在此处输入图像描述
整个代码:
class Store extends Component {
constructor() {
super()
this.state = {
slider_games: new Array()
}
}
filters =
[
{
"name":"Всі",
"to":"/store/all"
},
{
"name":"Пригоди",
"to":"/store/adventure"
},
{
"name":"Інді",
"to":"/store/indi"
},
{
"name":"Мультиплеєр",
"to":"/store/multiplayer"
},
{
"name":"Симулятори",
"to":"/store/symulators"
},
{
"name":"Стратегії",
"to":"/store/strategy"
},
{
"name":"Спорт",
"to":"/store/sport"
},
{
"name":"RPG",
"to":"/store/rpg"
}
];
componentWillMount(){
getSliderGames().then(res => {
this.setState({slider_games: res})
})
}
render() {
console.log(this.state.slider_games[0].name)
return (
<div>
<FilterHeader filter={this.filters}></FilterHeader>
<main className="content-main">
<Header text={"Нове"}></Header>
<section className="section-new">
<div id="multi-item-example" className="carousel slide carousel-multi-item"
data-ride="carousel">
<ol className="carousel-indicators">
<li data-target="#multi-item-example" data-slide-to="0" className="active"></li>
<li data-target="#multi-item-example" data-slide-to="1"></li>
<li data-target="#multi-item-example" data-slide-to="2"></li>
</ol>
<div className="carousel-inner" role="listbox">
<div className="carousel-item active">
<BigGameCard game={{"name": "this.state.slider_games[0].name", "img": "this.state.slider_games[0].img"}}></BigGameCard>
<BigGameCard game={{"name": "this.state.slider_games[0].name", "img": "this.state.slider_games[0].img"}}></BigGameCard>
<BigGameCard game={{"name": "this.state.slider_games[0].name", "img": "this.state.slider_games[0].img"}}></BigGameCard>
</div>
<div className="carousel-item">
<BigGameCard game={{"name": "this.state.slider_games[0].name", "img": "this.state.slider_games[0].img"}}></BigGameCard>
<BigGameCard game={{"name": "this.state.slider_games[0].name", "img": "this.state.slider_games[0].img"}}></BigGameCard>
<BigGameCard game={{"name": "this.state.slider_games[0].name", "img": "this.state.slider_games[0].img"}}></BigGameCard>
</div>
<div className="carousel-item">
<BigGameCard game={{"name": "this.state.slider_games[0].name", "img": "this.state.slider_games[0].img"}}></BigGameCard>
<BigGameCard game={{"name": "this.state.slider_games[0].name", "img": "this.state.slider_games[0].img"}}></BigGameCard>
<BigGameCard game={{"name": "this.state.slider_games[0].name", "img": "this.state.slider_games[0].img"}}></BigGameCard>
</div>
</div>
</div>
</section>
</main>
</div>
)
} }
导出默认商店
解决方案
您在从服务器获得数据之前渲染元素。它看起来像getSliderGames()
一个异步函数,所以你当前的流程是:
- 放
slider_games = []
- 调用
getSliderGames()
异步,然后立即.. - 日志
this.state.slider_games[0].name
-Because this.state.slider_games
为空,this.state.slider_games[0]
未定义,因此它没有任何属性。
我的建议是检查length == 0
案件。
class Store extends Component {
constructor() {
super()
this.state = {
slider_games: new Array()
}
}
componentWillMount(){
getSliderGames().then(res => {
this.setState({slider_games: res})
})
}
render() {
if (this.state.slider_games.length === 0) {
return "Loading slider_games...";
}
console.log(this.state.slider_games[0].name)
return (
<div>
<FilterHeader filter={this.filters}></FilterHeader>
<main className="content-main">
<Header text={"Нове"}></Header>
<section className="section-new">
<div id="multi-item-example" className="carousel slide carousel-multi-item"
data-ride="carousel">
<ol className="carousel-indicators">
<li data-target="#multi-item-example" data-slide-to="0" className="active"></li>
<li data-target="#multi-item-example" data-slide-to="1"></li>
<li data-target="#multi-item-example" data-slide-to="2"></li>
</ol>
<div className="carousel-inner" role="listbox">
<div className="carousel-item active">
<BigGameCard game={{"name": "this.state.slider_games[0].name", "img": "this.state.slider_games[0].img"}}></BigGameCard>
<BigGameCard game={{"name": "this.state.slider_games[0].name", "img": "this.state.slider_games[0].img"}}></BigGameCard>
<BigGameCard game={{"name": "this.state.slider_games[0].name", "img": "this.state.slider_games[0].img"}}></BigGameCard>
</div>
<div className="carousel-item">
<BigGameCard game={{"name": "this.state.slider_games[0].name", "img": "this.state.slider_games[0].img"}}></BigGameCard>
<BigGameCard game={{"name": "this.state.slider_games[0].name", "img": "this.state.slider_games[0].img"}}></BigGameCard>
<BigGameCard game={{"name": "this.state.slider_games[0].name", "img": "this.state.slider_games[0].img"}}></BigGameCard>
</div>
<div className="carousel-item">
<BigGameCard game={{"name": "this.state.slider_games[0].name", "img": "this.state.slider_games[0].img"}}></BigGameCard>
<BigGameCard game={{"name": "this.state.slider_games[0].name", "img": "this.state.slider_games[0].img"}}></BigGameCard>
<BigGameCard game={{"name": "this.state.slider_games[0].name", "img": "this.state.slider_games[0].img"}}></BigGameCard>
</div>
</div>
</div>
</section>
</main>
</div>
)
}
}
推荐阅读
- html - 将按钮置于底部上方
- sorting - 计算涉及大于某个值的元素之间交换的反转
- c++ - 从另一个线程向 uWebSockets 0.15.x 套接字发送数据
- vue.js - VUE.JS 中多层次的绑定和自定义事件触发
- css - 使用 animate.css 关闭引导模式
- php - 如何修复代码的第二部分?
- javascript - 我有 contenteditable div ,它里面是一个不可编辑的跨度,如何能够通过跨度文本长按来标记 div 的文本
- parsing - 解析 PDF 数据时如何考虑语法空白?
- android - SSD 边界框矩形缩放
- routes - BottomNavigationBar 保存偏移位置并导航到细节颤动