如何将异步状态传递给子组件道具？

// 父组件
import React, { Component } from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      asyncData: null, // 异步状态的初始值为null
    };
  }

  componentDidMount() {
    // 模拟异步请求
    setTimeout(() => {
      const asyncData = '异步状态的值';
      this.setState({ asyncData }); // 将异步状态保存到state中
    }, 1000);
  }

  render() {
    const { asyncData } = this.state;
    return (
      <div>
        <ChildComponent asyncData={asyncData} /> {/* 将异步状态作为props传递给子组件 */}
      </div>
    );
  }
}

export default ParentComponent;

// 子组件
import React from 'react';

const ChildComponent = ({ asyncData }) => {
  return (
    <div>
      <p>异步状态的值：{asyncData}</p> {/* 在子组件中使用异步状态 */}
    </div>
  );
};

export default ChildComponent;