无法解析对象数组

Question

我无法在反应中解析来自服务器的答案。

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>
      )

} }

导出默认商店

Answer 1

您在从服务器获得数据之前渲染元素。 看起来getSliderGames()是一个异步 function，所以您当前的流程是：

• 设置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>
    )
  }
}