函数链中的自定义函数 - 获取数组的长度

Question

我试图在映射时提取数组的长度。

会发生什么：

首先我有一个对象数组。每个对象都有一个帖子键，我在其中存储该对象的帖子。我的代码从所有对象中获取所有帖子并将它们映射到一个新数组，以便我可以在前端向用户显示所有对象的所有帖子。

我想一次只显示 10 个帖子。所以我放了一个.slice(0, page * 10)——变量页面由页面底部的一个按钮控制。如果用户点击按钮，页面就会增加屏幕上的帖子数量。

这一切都很好。但是-我希望能够计算帖子总数，并且仅在有更多帖子可用时才显示该按钮。有没有办法在提取帖子数量的同时仍然允许它映射下面这个函数的结果？

{
  bandTypes === "all"
    ? allBands
      .filter(band => {
        if (showType !== 'Show Type') {
          return band.showTypes.includes(showType)
        } else {
          return band
        }
      })
      .reduce(
        (allPosts, band) =>
          allPosts.concat(
            (band.youtube.length > 0 &&
              band.bandBio !== "n/a" &&
              band.bandGenre !== "n/a")
              ? band.posts.map((post) => ({ post, band }))
              : []
          ),
        []
      )
      .sort((a, b) => new Date(b.post.date) - new Date(a.post.date))
      .slice(0, page * 10)
      .map(({ post, band }) => <div key={uuidv4()}>{convertPost(post, band)}</div>)
    : null
}

如果我可以在其中放置一个匿名函数来将状态设置为数组的长度，那就太好了。

Answer 1

我认为尝试在没有任何临时变量的情况下完成此操作不会非常有效，并且可能会非常难看。

我认为您应该首先创建所有帖子的数组，然后在组件的return 内简单地使用它的length。

以下是我将如何做的示例：

const MyComponent = () => {
    let allPosts = []
    if (bandTypes === "all") {
        allPosts = allBands
            .filter((band) => {
                if (showType !== "Show Type") {
                    return band.showTypes.includes(showType)
                } else {
                    return band
                }
            })
            .reduce(
                (allPosts, band) =>
                    allPosts.concat(
                        band.youtube.length > 0 &&
                            band.bandBio !== "n/a" &&
                            band.bandGenre !== "n/a"
                            ? band.posts.map((post) => ({
                                  post,
                                  band,
                              }))
                            : []
                    ),
                []
            )
            .sort((a, b) => new Date(b.post.date) - new Date(a.post.date))
    }

    return (
        <div>
            {allPosts.slice(0, page * 10).map(({ post, band }) => (
                <div key={uuidv4()}>{convertPost(post, band)}</div>
            ))}
            {allPosts.length < page * 10 && <button>Show more posts</button>}
        </div>
    )
}

（顺便说一句，对key 使用类似uuidv4 的东西并不理想，因为React 的渲染效率较低。最好将key 建立在每个帖子独有的东西上并且不会改变对于每个渲染，例如来自数据库的 id 或类似的东西）