Javascript 反应贴图更改索引编号并中断条件渲染

我正在使用React map在我的网页上的facebook提要中呈现一些幻灯片。下面的函数获取我从Facebook Graph API收集的数据，并将它们呈现到页面上react slick滑块的幻灯片中

第一张幻灯片应该始终是我的组件，然后其他幻灯片应该是带有图像和文本的幻灯片。我已经这样做了，如果index=0，那么渲染组件

它工作得很好，但最近它坏了，我发现这是因为有时候第一张幻灯片的索引是1，而不是0。我不知道为什么，第一张幻灯片的索引不应该总是0吗

renderSlides () {
  const { posts } = this.state
  const postsAvailable = posts.length > 0

  if (!postsAvailable) return null
  return posts.map((post, index) => {
    if (!post.message) return null
    return (
      <div key={post.id} ref={slider => (this.slider = slider)}>
        {index === 0 && <SliderItem />}
        {index >= 1 && (
          <div className='item'>
            <img
              data-fb={post.full_picture}
            />
            <div className={`item-content slide-${post.id}`}>
              <p className='text'>{post.message}</p>
            </div>
          </div>
        )}
      </div>
    )
  })
}

…有时第一张幻灯片的索引为1，而不是0。我不知道为什么这是

发生这种情况的唯一原因是，在示例中，如果在帖子上调用map的数组是一个稀疏数组，索引0处没有条目。例如：

常数下限=[]； 下[1]=一个； 下[2]=2； console.log“lower”在索引0处有一个条目吗$下{0}`； console.log“lower”在索引1处有一个条目吗$下{1}`； console.log“lower”在索引2处有一个条目吗${2在下}`； log`Mapping it:`； const upper=lower.mapvalue，index=>{ log`index=${index}`； 返回值.toUpperCase； }; 控制台。logupper； 控制台。日志“upper”在索引0处有一个条目吗$上面的{0}`； 控制台。日志“upper”在索引1处有一个条目吗${1在上}`； 控制台。日志“upper”在索引2处有一个条目吗${2在上}`； .作为控制台包装{ 最大高度：100%！重要；

---

}粘贴您的posts对象。我将posts定义为posts=[]这样的状态，是否应该采用不同的方式？有时索引是0，有时索引是1，但并不总是1。@user3005003-posts=[]对于创建空数组来说很好。问题是，在这样做之后，要么你没有像live examplea bove那样填写索引0处的条目，要么你正在填写它，但稍后将其删除。问题：如果你这样做，但从较低的[5]=“1”开始，索引将从何处开始？@ColinRicardo-5，因为map只访问数组中存在的条目。JavaScript的传统数组发布在我非常贫乏的博客上。如果执行常量a=[]；a[5]=五；您已经创建了一个数组，其长度设置为6，比最高索引高一个，在索引0-4处没有任何条目，在索引5处有一个条目。对其调用map将只调用map的回调一次，值为5，索引为5。

downloadFBAPI () {
    window.fbAsyncInit = function () {
      FB.init({
        appId: appID,
        cookie: true,
        xfbml: true,
        version: 'v3.2'
      })
    }.bind(this);

    (function (d, s, id) {
      var js
      var fjs = d.getElementsByTagName(s)[0]
      if (d.getElementById(id)) return
      js = d.createElement(s); js.id = id
      js.src = '//connect.facebook.net/en_US/sdk.js'
      fjs.parentNode.insertBefore(js, fjs)
    }(document, 'script', 'facebook-jssdk'))
    SuperAgent
      .get('APIcall')
      .accept('application/json')
      .use(legacyIESupport)
      .end(this.getData)
  }

  getData (err, res) {
    if (err || !res || !res.body) {
      this.setState({
        isLoaded: true,
        err
      })
      return err
    } else {
      const result = res.body.data
      this.setState({
        isLoaded: true,
        posts: result
      })
    }
  }