在react中动画(获取数据)后未呈现组件

import React, { Component } from 'react';
import { CSSTransition } from 'react-transition-group';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
      showAnimation: false
    };
  }

  componentDidMount() {
    // 模拟异步请求数据
    setTimeout(() => {
      const data = '获取到的数据';
      this.setState({ data, showAnimation: true });
    }, 1000);
  }

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

    return (
      <div>
        <CSSTransition
          in={showAnimation}
          timeout={500}
          classNames="fade"
          unmountOnExit
        >
          <div className="animated-component">
            {data ? <p>{data}</p> : <p>正在获取数据...</p>}
          </div>
        </CSSTransition>
      </div>
    );
  }
}

export default MyComponent;