如何实现自定义fetch钩子
如何实现自定义fetch钩子
提问于 2020-05-19 10:53:58
我尝试在我的模块中实现我的自定义钩子。但这表明我违反了一些钩子规则
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;下面给出了自定义获取代码
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;如果需要在useFetch自定义钩子中进行任何修改，请建议我
回答 1
Stack Overflow用户
发布于 2020-05-19 11:00:23
您正试图在MedicineContainer外部调用
- useFetch
const res = useFetch('http://localhost:5000/api/medicines', {});
console.log(res, 'popopo');- 您在MedicineContainer中对useFetch的用法不正确。您需要使用url和选项调用它，并使用返回值，而不是再次维护状态
。
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;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61889294
复制相关文章
点击加载更多
相似问题
如何使用Traefik+MetalLB公开Kubernetes API (apiserver)
Kubernetes - traefik外部ip被挂起
Kubernetes traefik通过特定的内部IP
FastAPI (starlette)获得客户端真正的IP
MetalLB在Kubernetes是如何工作的
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
