踩坑之react生命周期

问题情景

创建组件tableCom，用来渲染表格，实质还是使用antd里的table，但是重新包装一下是为了columns和dataSource通过外部数据传入。

<TableCom columns={ columns } tableInfo={ tableInfo }/>

tableInfo是后端返回的数据，类似于像这样的数据类型

data = [
    { name: '111',age: 1 },
    { name: '222',age: 2 }
];

但是表格的最后一列必须是一个操作栏，所以就必须在columns里添加操作的这一列，然后在render里写具体那一列渲染的是什么。

因为columns是通过外部文件引入的一个数据对象，所以需要在react文件引用这个组件前给columns数组push进去一个这样的数据。

    {
        title: '操作',
        key: 'option',
        dataIndex: 'option',
        width: '100px',
        render: () => <a href="#">查看详情</a>
    };

所以我这样做了

render() {
        const newCol = {
            title: '操作',
            key: 'option',
            dataIndex: 'option',
            width: '100px',
            render: () => <a href="#">查看详情</a>
        };
        columns.push(newCol)；
        return (
            <div>
                <TableCom columns={ columns } tableInfo={ tableInfo }/>
            </div>
        );
   }

然而效果却是这样的

出现了两列操作列

后来我通过打断点发现了问题在哪

首先对于react来说它的生命周期一开始肯定是这样的过程componentWillMount->render->componentDidMount。那么就是说页面开始就执行了render方法，已经给columns数组push过yici了，接着componentDidMount执行完后获取了后端数据然后改变了传到组件里的props，所以要执行componentWillReceiveProps这个周期函数，之后再执行render方法，等于又push了一遍，所以出现了两列的情况。

render() {
        const newCol = {
            title: '操作',
            key: 'option',
            dataIndex: 'option',
            width: '100px',
            render: () => <a href="#">查看详情</a>
        };
        let newArr = [];
        for(let i = 0;i < columns.length; i++){
            newArr.push(columns[i]);
        }
        newArr.push(newCol);
        return (
            <div>
                <TableCom columns={ columns } tableInfo={ tableInfo }/>
            </div>
        );
   }