在基于类的组件中使用 usestate 而不是 state 在反应钩子中编写代码

Question

我正在尝试学习 React 中的钩子。 我有一些用基于类的组件编写的片段。 我正在努力将其转换为使用 usestate 和 useeffect 用钩子编写的代码。

我有以下两个组件 ContactCards 和 ContactCard，其中我在 ContactCards 中提供了 api，而 api 在 heroku 服务器中提供。

我的名片

import ContactCard from "./ContactCard";
import axios from "axios";

class ContactCards extends Component {
  state = {
    contacts: [
      {
        thumbnail: clock,
        title: "Opening Times",
        data1: "",
        data2: "",
      },
      {
        thumbnail: telephone,
        title: "Phone",
        data1: "",
        data2: "",
      },
      {
        thumbnail: location,
        title: "Location",
        data1: "",
        data2: "",
      },
    ],
  };

  componentDidMount = () => {
    axios
      .get("https://example.herokuapp.com/api/contactinfo")
      .then((res) => {
        console.log(res.data[0]);
        let data = res.data[0];
        this.setState({
          contacts: [
            {
              thumbnail: clock,
              title: "Opening Times",
              data1: data.open_hour,
              data2: data.close_hour,
            },
            {
              thumbnail: telephone,
              title: "Phone",
              data1: data.phone_1,
              data2: data.phone_2,
            },
            {
              thumbnail: location,
              title: "Location",
              data1: data.street_name,
              data2: data.city + ", " + data.state + ", " + data.country,
            },
          ],
        });
      })
      .catch((err) => {
        console.log(err);
      });
  };

  render() {
    return (
      <div className="contact-cards">
        {this.state.contacts.map((contact, index) => {
          return <ContactCard {...contact} key={index} />;
        })}
      </div>
    );
  }
}

export default ContactCards;

在这里，我将缩略图和标题作为静态数据，而 data1 和 data2 是来自 api 的数据。

我的名片

interface IContactCardProps {
  thumbnail?: string;
  title?: string;
  data1?: string;
  data2?: string;
}

interface IContactCardState {}

class ContactCard extends Component<IContactCardProps, IContactCardState> {
  render() {
    return (
      <div className="contact-card">
        <div className="container">
          <div className="thumbnail">
            <img src={this.props.thumbnail} alt={this.props.title} />
          </div>
          <div className="title">{this.props.title}</div>
          <div className="data">{this.props.data1}</div> 
          <div className="data">{this.props.data2}</div>
        </div>
      </div>
    );
  }
}

export default ContactCard;

如何将api导入的页面转换为使用useusestate和useeffect的functioncal组件？？