我有這個用于更新業務實體的 React 組件。它基本上通過 componentDidMount 上的 ID 獲取，并在提交表單時發送放置請求。我想將其重構為基于鉤子的組件。這是之前的代碼import React from "react";import axios from "axios";//Api Helper Methodsconst API_HOST = "https://api.example.com";const get = (endPoint) =>  axios    .get(`${API_HOST}/${endPoint}`)    .then((response) => response.data);export const put = (endPoint, payload, id) =>  axios    .put(`${API_HOST}/${endPoint}/${id}`, payload)    .then((response) => response.data);//React route (uses React Router)const END_POINT = `users`;class Entity extends React.Component {  state = { entity: {}, fetching: true };  getEntity = async () => {    const { id } = this.props.match.params;    this.setState({ fetching: true });    const entity = await get(`${END_POINT}/${id}`);    this.setState({ entity, fetching: false });  };  onChange = (key, value) =>    this.setState({ entity: { ...this.state.entity, [key]: value } });  componentDidMount() {    this.getEntity();  }  onSubmit = async (e) => {    e.preventDefault();    let { entity } = this.state;    let { match } = this.props;    await put(END_POINT, entity, match.params.id);  };  render() {    const { entity, fetching } = this.state;    if (fetching) {      return <p>loading...</p>;    }    return (      <form onSubmit={this.onSubmit}>        <label htmlFor="name">name</label>        <input          value={entity["name"]}          onChange={(e) => this.onChange("name", e.target.value)}        />        <button type="submit">submit</button>      </form>    );  }}export default Entity;這是我到目前為止的代碼。下一步是提取自定義掛鉤。const END_POINT = `users`;export default function Entity({ match }) {  const [entity, setEntity] = useState({ name: "" });  const [fetching, setFetching] = useState( true );  const { id } = match.params;  const onChange = (key, value) => setEntity({ ...entity, [key]: value });