如何让react组件只在初始化时加载一次表格列信息,之后不再加载
时间: 2023-07-14 12:13:50 浏览: 65
在 React 中,可以使用生命周期方法 `componentDidMount()` 来在组件挂载后执行一次操作。你可以在这个方法中请求表格列信息,并将其保存在组件的状态中。然后,每次重新渲染组件时,只需要从状态中获取表格列信息即可,而不需要重新请求。
以下是一个示例代码:
```jsx
import React, { Component } from 'react';
class Table extends Component {
constructor(props) {
super(props);
this.state = {
columns: [] // 列信息
};
}
componentDidMount() {
// 发送请求获取表格列信息,并保存在状态中
fetch('/api/columns')
.then(res => res.json())
.then(data => {
this.setState({ columns: data });
});
}
render() {
const { columns } = this.state;
return (
<table>
<thead>
<tr>
{columns.map(column => (
<th key={column.id}>{column.title}</th>
))}
</tr>
</thead>
<tbody>{/* 表格内容 */}</tbody>
</table>
);
}
}
export default Table;
```
在上面的代码中,`componentDidMount()` 方法中发送了一个请求来获取表格列信息,并将其保存在组件的状态中。在 `render()` 方法中,只需要从状态中获取表格列信息,然后渲染表头即可。这样,表格列信息只会在组件初始化时加载一次,之后不再加载。