Javascript 如何实现定制的抓取钩子

我尝试在我的模块中实现我的自定义钩子。但这表明我违反了一些规则

import React, { useState, useEffect } from 'react';
import useFetch from '../../Helpers/Custom useFetch()';

import MedicineList from './MedicineUI';

const MedicineContainer = () => {
  const [medicineLists, setMedicineList] = useState([]);


  useEffect(() => {
    fetch('http://localhost:5000/api/medicines')
      .then((response) => response.json())
      .then((medicineList) => {


        setMedicineList(medicineList);
      });
  }, []);
  return <MedicineList medicineList={medicineLists} />;
};
const res = useFetch('http://localhost:5000/api/medicines', {});


export default MedicineContainer;

如果useFetch定制挂钩需要任何修改，请建议我

您正在尝试在MedicineContainer外部调用useFetch

• 您在MedicineContainer中使用useFetch不正确。您需要使用url和选项调用它，并使用返回值，而不是再次维护状态

import React，{useState，useffect}来自“React”；
从“../../Helpers/Custom useFetch（）”导入useFetch；
从“/MedicineUI”导入MedicineList；
常量MedicineContainer=（）=>{
const{response，error，load}=useFetch（'http://localhost:5000/api/medicines',  { } );
如果（装载）{
返回加载。。。
}
返回；
};
导出默认的MedicineContainer；

• 您正在尝试在MedicineContainer外部调用useFetch

• 您在MedicineContainer中使用useFetch不正确。您需要使用url和选项调用它，并使用返回值，而不是再次维护状态

import React，{useState，useffect}来自“React”；
从“../../Helpers/Custom useFetch（）”导入useFetch；
从“/MedicineUI”导入MedicineList；
常量MedicineContainer=（）=>{
const{response，error，load}=useFetch（'http://localhost:5000/api/medicines',  { } );
如果（装载）{
返回加载。。。
}
返回；
};
导出默认的MedicineContainer；

const[apireult，setapireult]=useFetch（[]）的含义是什么？是用法导致了错误吗？@HagaiHarari这不是必需的。

const[apireult，setapireult]=useFetch（[]）

的含义是什么？是用法导致了错误吗？@HagaiHarari这不是必需的。×无效的钩子调用。钩子只能在函数组件的主体内部调用。发生这种情况的原因如下：1。React和渲染器（如React DOM）2的版本可能不匹配。你可能违反了Hooks 3的规则。同一个应用程序中可能有多个React副本您是否从MedicineContainer外部删除了useFetch的用法？自定义挂钩需要任何建议或修改？您的自定义挂钩是正确的，只是用法错误×无效挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况的原因如下：1。React和渲染器（如React DOM）2的版本可能不匹配。你可能违反了Hooks 3的规则。同一个应用程序中可能有多个React副本您是否从MedicineContainer外部删除了useFetch的用法？自定义挂钩需要任何建议或修改？您的自定义挂钩是正确的，只是用法有误

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

const useFetch = (url, options) => {
  const [response, setResponse] = React.useState(null);
  const [error, setError] = React.useState(null);
  const [isLoading, setIsLoading] = React.useState(false);
  React.useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      try {
        const res = await fetch(url, options);
        const json = await res.json();
        setResponse(json);
        setIsLoading(false);
      } catch (error) {
        setError(error);
      }
    };
    fetchData();
  }, [options, url]);
  return { response, error, isLoading };
};
export default useFetch;

const res = useFetch('http://localhost:5000/api/medicines', {});
console.log(res, 'popopo');

import React, { useState, useEffect } from 'react';
import useFetch from '../../Helpers/Custom useFetch()';

import MedicineList from './MedicineUI';

const MedicineContainer = ( ) => {

  const { response, error, loading } = useFetch('http://localhost:5000/api/medicines',  { } );

  if ( loading ) {
    return <div>Loading...</div>
  }
  return <MedicineList medicineList={response} />;
};


export default MedicineContainer;