问题情景
创建组件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>
);
}