函数链中的自定义函数-获取数组长度 [英] Custom function in function chain - To get Length of Array

问题描述

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

I am trying to extract the length of an array while mapping it.

这是会发生什么：

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

First I have an array of objects. Each object has a key of posts where I store the posts for that object. My code takes all the posts from all the objects and maps them to a new array so that I can show all the posts from all the objects to the user on the front end.

我想一次只显示10条帖子。因此，我放入了 .slice（0，page * 10）-变量页面由页面底部的按钮控制。如果用户单击该按钮，则该页面将增加屏幕上的帖子数量。

I'd like to show only 10 posts at a time. So I put a .slice(0, page * 10) - the variable page is controlled by a button at the bottom of the page. If the user hits the button, the page then increases the number of posts on the screen.

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

This all works great. BUT - I'd like to be able to count the total number of posts and only show the button when there are more posts available. Is there a way to extract the number of posts while still allowing it to map the results from this function below?

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

如果我可以将匿名函数放在将状态设置为数组长度的地方，那将是很棒的

It would be great if I could just put an anonymous function in there somewhere that sets the state to the length of the array.

推荐答案

我认为尝试在没有任何临时变量的情况下实现此目标将不会非常有效，并且可能会很丑陋。

I think that trying to accomplish this without any temporary variables is not going to be very efficient and probably would be quite ugly.

我认为您应该首先创建所有帖子的数组，然后在返回中使用 length 您的组件。

I think you should first create the array of all posts and then simply use it's length inside the return of your component.

以下是我如何执行此操作的示例：

Here's an example of how I would do it:

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

（顺便说一句，使用的是 uuidv4 键的c $ c>并不理想，因为React在渲染时效率较低，最好在键在每个帖子都具有唯一性且不会针对每个渲染进行更改的内容上，例如数据库中的ID或此类内容）

(BTW using something like uuidv4 for the key isn't ideal, because React is less efficient with rendering then. It's better base the key on something that is unique to each post and doesn't change for each render, for example an id from the database or something of this sort)

这篇关于函数链中的自定义函数-获取数组长度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！