如何在排序和过滤数据时设置react组件的加载状态？

import React, { Component } from 'react';

class DataComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      data: [] // 存储排序和过滤后的数据
    };
  }

  componentDidMount() {
    this.loadData();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.filters !== this.props.filters || prevProps.sortBy !== this.props.sortBy) {
      this.loadData();
    }
  }

  loadData() {
    // 设置loading状态为true，表示数据正在加载中
    this.setState({ loading: true });

    // 执行数据排序和过滤的操作，可以根据props中的filters和sortBy进行相应的处理

    // 模拟异步加载数据
    setTimeout(() => {
      // 假设排序和过滤后的数据存储在sortedAndFilteredData变量中
      const sortedAndFilteredData = [...];

      // 更新state中的data和loading属性
      this.setState({ data: sortedAndFilteredData, loading: false });
    }, 1000);
  }

  render() {
    const { loading, data } = this.state;

    if (loading) {
      return <div>Loading...</div>; // 可以显示一个加载中的UI
    }

    return (
      <div>
        {/* 根据data渲染数据列表 */}
      </div>
    );
  }
}

export default DataComponent;