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

IT技术 javascript arrays reactjs
2021-05-17 14:00:19

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

这是发生的事情：

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

我想一次只显示 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
}

如果我能在某处放置一个匿名函数将状态设置为数组的长度，那就太好了。

1个回答

我认为在没有任何临时变量的情况下尝试实现这一点不会非常有效，而且可能会非常难看。

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

这是我如何做的一个例子：

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

（顺便说一句，使用类似uuidv4for the 的东西key并不理想，因为那时 React 的渲染效率较低。最好基于key每个帖子独有的东西并且不会因每次渲染而改变，例如来自数据库的 id 或这种东西）

其它你可能感兴趣的问题
上一篇Webpack - React ES6 转译每个模板（src 到 dist） 下一篇create-react-app 的 package.json 中的“代理”字段如何工作？