Question

我正在使用React map在我网页上的Facebook feed中渲染一些幻灯片。下面的函数将我从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>
    )
  })
}

编辑

这是我从Facebook获取帖子数据的方式

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

Answer 1

...有时第一张幻灯片的索引为1，而不是0。我不确定为什么会这样。

只会发生的原因是，如果您在示例中的map上调用posts的数组是具有以下内容的稀疏数组在索引0处没有条目。示例：

const lower = [];
lower[1] = "one";
lower[2] = "two";
console.log(`'lower' has an entry at index 0? ${0 in lower}`);
console.log(`'lower' has an entry at index 1? ${1 in lower}`);
console.log(`'lower' has an entry at index 2? ${2 in lower}`);
console.log(`Mapping it:`);
const upper = lower.map((value, index) => {
    console.log(`index = ${index}`);
    return value.toUpperCase();
});
console.log(upper);
console.log(`'upper' has an entry at index 0? ${0 in upper}`);
console.log(`'upper' has an entry at index 1? ${1 in upper}`);
console.log(`'upper' has an entry at index 2? ${2 in upper}`);

.as-console-wrapper {
    max-height: 100% !important;
}

您至少可以通过以下三种方式获得一个稀疏数组：

您是以这种方式创建的（就像上面的示例中的lower一样）；或
（＃1的变化。）您是通过在稀疏的数组上使用map来创建它的（例如示例中的upper）；或
您使用了delete（或类似名称）从数组（delete theArray[0];）中删除了一个条目

原因是map仅访问数组中存在的条目，它会跳过稀疏数组中的间隙。请记住，在规范级别上，JavaScript的传统数组aren't really arrays¹（尽管它们通常是作为实现优化的），这意味着您可以拥有length为3的数组，但只能是（例如）其中的两个条目。这就是上方的lower（也是upper）。否则您可能会有更多的空白：

const a = [];
a[3] = "three";
a[5] = "five";
logArray("a", a);
const b = a.map((value, index) => {
    console.log(`index = ${index}`);
    return value.toUpperCase();
});
logArray("b", b);

function logArray(name, a) {
    console.log(`${name}'s length is ${a.length}`);
    for (let index = 0; index < a.length; ++index) {
        console.log(`${name} has entry at index ${index}? ${index in a}`);
    }
}

.as-console-wrapper {
    max-height: 100% !important;
 }

a和b那里没有索引0、1、2或4的条目。

如果设置length（或使用delete），则末尾也可以留有空白。

¹（这是我贫乏的小博客上的帖子。）

React Map更改索引号并中断条件渲染

1 个答案: