如何让React在渲染前等待Redux操作？

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchData } from './actions'; // 假设这是触发异步操作的action

class MyComponent extends Component {
  componentDidMount() {
    this.props.fetchData(); // 在组件挂载后立即触发数据获取
  }

  render() {
    const { data } = this.props;
    if (!data) {
      return <div>Loading...</div>; // 数据加载中的UI
    }
    return (
      <div>
        {/* 渲染数据 */}
      </div>
    );
  }
}

const mapStateToProps = state => ({
  data: state.data // 假设data是Redux store中的一个状态
});

export default connect(mapStateToProps, { fetchData })(MyComponent);

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchData } from './actions'; // 假设这是触发异步操作的action

function MyComponent() {
  const dispatch = useDispatch();
  const data = useSelector(state => state.data); // 假设data是Redux store中的一个状态

  useEffect(() => {
    dispatch(fetchData()); // 组件挂载时触发数据获取
  }, [dispatch]);

  if (!data) {
    return <div>Loading...</div>; // 数据加载中的UI
  }

  return (
    <div>
      {/* 渲染数据 */}
    </div>
  );
}

export default MyComponent;