React Ant 表自定义列计算.如何获取每行中其他项目的长度 [英] React Ant table customized column calculation. How to get the length of other items in each row

查看:22
本文介绍了React Ant 表自定义列计算.如何获取每行中其他项目的长度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我制作了一个应用程序,我输出每个帖子的问题长度,但我得到的每个帖子的结果等于:310.

可能是因为渲染太多.
如何解决这个问题并获得每个帖子的实际问题长度?

链接到我的应用程序:

I made an application where I output the length of the questions for each post, but I get the result for each post equal with: 310.

Probably it happens because of too many renders.
How to solve this and get the real length of the questions for each post?

link to my app: https://codesandbox.io/s/basic-usage-ant-design-demo-4tl5h

解决方案

Fix the incorrect number: do not push, use callback event of render instead

Ant Table API: table Column

const App = () => {
  const res = [
    ...Object.keys(posts[0]).map(i => {
      return {
        title: i,
        dataIndex: i,
        key: i
      };
    }),
    {
      title: "Questions",
      key: "Questions",
      render: e => {
        console.log(e); // Object {title: 1, id: "123"}
        return (
          <Router>
            <Link to={`demo/${e.id}/url`}>
              {questions.filter(q => q.id_post.toString() === e.id).length}
            </Link>
          </Router>
        );
      }
    }
  ];
  return <Table columns={res} dataSource={posts} />;
};

这篇关于React Ant 表自定义列计算.如何获取每行中其他项目的长度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆