如何将img src映射到React中异步函数的结果？

constructor(props) {
  super(props);
  this.state = {
    imgUrl: null // 初始化为空
  };
}

componentDidMount() {
  asyncFunction().then(result => {
    this.setState({ imgUrl: result });
  });
}

async asyncFunction() {
  // 异步函数的实现，可以是调用后端API获取图片的URL
  // 例如：
  const response = await fetch('http://example.com/api/image');
  const data = await response.json();
  return data.imgUrl;
}

render() {
  const { imgUrl } = this.state;
  return (
    <div>
      <img src={imgUrl} alt="Async Image" />
    </div>
  );
}