如何在reactjs中呈现来自回调函数的数据？

import React, { Component } from 'react';

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

  componentDidMount() {
    // 假设 fetchData 是一个异步回调函数
    fetchData((data) => {
      this.setState({ data });
    });
  }

  render() {
    const { data } = this.state;
    return (
      <div>
        {data ? (
          data.map((item) => <div key={item.id}>{item.name}</div>)
        ) : (
          <p>Loading...</p>
        )}
      </div>
    );
  }
}

export default DataFetching;

import React, { useState, useEffect } from 'react';

function DataFetching() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 假设 fetchData 是一个异步回调函数
    fetchData((data) => {
      setData(data);
    });
  }, []); // 空依赖数组确保只在组件挂载时执行一次

  return (
    <div>
      {data ? (
        data.map((item) => <div key={item.id}>{item.name}</div>)
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

export default DataFetching;