问使用和编写React Hooks

EN

            import React, { Component } from 'react';
        import useFetch  from "../useFetch";

        export class Patient extends Component {
          static displayName = Patient.name;

          constructor(props) {
            super(props);
          }

            componentDidMount() {

                alert("fgggg");
                const { isLoading, serverError, apiData } = useFetch(
                    "/Patient/GetPatients"
                );


            }

          render() {
            return (
              <div>
              </div>
            );
          }
        }

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

        function useFetch(url){
            const [isLoading, setIsLoading] = useState(false);
            const [apiData, setApiData] = useState(null);
            const [serverError, setServerError] = useState(null);

            alert("dddd");
            useEffect(() => {
                setIsLoading(true);
                const fetchData = async () => {
                    try {
                        fetch(url)
                            .then(response => response.json())
                            .then(data => setApiData(data));

                        //const resp = await axios.get(url);
                        //const data = await resp?.data;

                        setIsLoading(false);
                    } catch (error) {
                        alert(error);
                        setServerError(error);
                        setIsLoading(false);
                    }
                };

                fetchData();
            }, [url]);

            return { isLoading, apiData, serverError };
        };
        export default useFetch;

Attempted import error: 'useFetch' is not exported from '../useFetch'.

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

        export default function useFetch(url, opts){
                const [response, setResponse] = useState(null)
                const [loading, setLoading] = useState(false)
                const [hasError, setHasError] = useState(false)
                useEffect(() => {
                    setLoading(true)
                    fetch(url, opts)
                        .then((res) => {
                            setResponse(res.data)
                            setLoading(false)
                        })
                        .catch(() => {
                            setHasError(true)
                            setLoading(false)
                        })
                }, [url])
                return [response, loading, hasError]
        }

            import React, { Component } from 'react';
        import useFetch from "../useFetch";

        export class Patient extends Component {
          static displayName = Patient.name;

          constructor(props) {
            super(props);
          }

            componentDidMount() {

                alert("fgggg");
                const [ response, loading, hasError ] = useFetch("", "");


            }

          render() {
            return (
              <div>
              </div>
            );
          }
        }

×
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app