根据另一个值过滤元素 [英] Filter the elements according to another value

问题描述

我想输出 ReactJs 中每个帖子的所有问题的数量.为此，我创建了下一个代码:

I want to output the number of all questions for each post in ReactJs. For this i created the next code:

const posts = [{
        title: 1,
        id: "123"
    },
    {
        title: 2,
        id: "1234"
    },
    {
        title: 3,
        id: "12345"
    }
]

const questions = [{
        id: 55,
        name: 'question one',
        id_post: '123'
    },
    {
        id: 56,
        name: 'question two',
        id_post: '123'
    },
    {
        id: 57,
        name: 'question three',
        id_post: '1234'
    },
    {
        id: 58,
        name: 'question four',
        id_post: '123'
    },

];

posts.map( (e, k) => {
    return (
      <Link key={k} to={`demo/${e.id}/url`}>
      { questions.filter(here i want to output the number of questions that correspond to each post)}
      </Link>
    )
})

我有 posts 数组和 questions 数组.我想在 url 中创建一个 Link 用它自己的 id，同时过滤每个帖子的问题数量，并在 Link 内输出数字.怎么办?

I have posts array and questions array. I want to create a Link with it own id in the url and in the same time to filter the number of questions for each post, and inside theLink to output the number. How to do to this?

...接下来的问题是:我正在使用蚂蚁设计、表格组件，然后我可以使用下一个结构:

...the issue is next: I am using ant design, table component, and there i can use the next structure:

`  render: ()=>(
    console.log('render'),
    events.map( (e, key) => {
      console.log(ev.id);
        return (
            <Link key={k} to={`demo/${e.id}/url`}>
            { questions.filter(q => q.id_post === e.id).length }
            </Link>
        )
      )
    })

我用它在我的表中创建一列.问题是我有很多渲染.当我把这段代码放在console.log(ev.id)中时，我会在每次渲染中得到所有的id.最后我得到例如不是0作为长度而是00000000`，这取决于我有多少渲染或ID.如何解决这个问题?请看一下这一行:45 https://codesandbox.io/s/8i1dy

I use this to create a column in my table. The problem is that i have to many renders. When i put this code i get all ids inconsole.log(ev.id)on each render. And at the end i get for example not0as length but00000000`, depending but how many renders, or ids i have. How to solve this? Please, take a look at the line: 45 https://codesandbox.io/s/8i1dy

推荐答案

一种可能的方法是预先计算:

One possible approach is doing this count beforehand:

const questionCountByPost = questions.reduce((acc, q) => {
  const postId = q.id_post;
  acc[postId] = (acc[postId] || 0) + 1;
  return acc;
}, {});

... 每次您的帖子或问题发生变化时，这看起来都是一件好事.你可以像这样在你的地图函数中使用这个对象:

... which looks like a nice thing to do each time either your posts or questions change. You can use this object inside your map function like this:

return (
  <Link key={k} to={`demo/${e.id}/url`}>
  { questionCountByPost[e.id] }
  </Link>
)

<小时>

另一种方法是直接在模板中进行计数:

---

Another approach is doing this count directly in template:

return (
  <Link key={k} to={`demo/${e.id}/url`}>
  { questions.filter(q => q.id_post === e.id).length }
  </Link>
)

它的性能较差(因为您每次都必须遍历整个数组)，但显然更具可读性.如果帖子和问题的数量不是很大，这可能是一个更好的解决方案.

It's less performant (as you'll have to iterate through the whole array each time), but apparently more readable. If the number of posts and questions is not that big, it might a better solution.

这篇关于根据另一个值过滤元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！