react使用ant Desgin 的table组件动态设置columns

Question

react使用ant Desgin 的table组件动态设置columns，然后会有按钮可以更改moduleId的值

 state = {
  moduleId: "1",//模块编号
}
columns = [
        {  // 当moduleId为7时不展示
            title: '缩略图',
            dataIndex: 'img',
            key: 'img',
            hideInTable:true,
            render: (_, record) => {
                return <img src={record.img} alt="" className={style.Abbreviate} style={{ width: 40, height: 40 }} />
            }
        },
        {  // 当moduleId为5时不展示
                title: '所属页面',
                dataIndex: 'description',
                key: 'description',
            },
        {
            title: '描述',
            dataIndex: 'description',
            key: 'description',
        },
]

我的解答思路和尝试过的方法

columns = [
        this.state.moduleId!=='7' && {  // 当moduleId为7时不展示
            title: '缩略图',
            dataIndex: 'img',
            key: 'img',
            hideInTable:true,
            render: (_, record) => {
                return <img src={record.img} alt="" className={style.Abbreviate} style={{ width: 40, height: 40 }} />
            }
        },
        {  // 当moduleId为5时不展示
                title: '所属页面',
                dataIndex: 'description',
                key: 'description',
            },
        {
            title: '描述',
            dataIndex: 'description',
            key: 'description',
        },
].filter(item => item !== false)
当我更改了moduleId，页面并没有变化，发现是因为columns 中使用到的this.state.moduleId一直没有变化，一直是初始值

Answer 1

你可以写个方法来获取columns，比如getColumns = () => {}，在render里调用这个方法来获取列