reactjs - 在 useEffect 挂钩中使用外部函数获取未定义
问题描述
在useEffect
挂钩中,我使用了一个函数将请求发送到 api 进行搜索。函数名是searchCharacters
并且它在组件之外。TypeError: searchCharacters(...) is undefined
当我的代码在那一点上执行时,我得到了错误
。为什么?如何解决这个问题?
function Dashboard() {
const [searchParam, setSearchParam] = useState("");
const [results, setResults] = useState([]);
const [isSearching, setIsSearching] = useState(false)
const debouncedSearchTerm = useDebounce(searchParam, 500);
useEffect( ()=> {
if(debouncedSearchTerm){
setIsSearching(true);
searchCharacters(debouncedSearchTerm).then(res => {
setIsSearching(false);
console.log("im search result", res);
setResults(res);
});
}else{
setResults([]);
}
}, [debouncedSearchTerm]);
}
function searchCharacters(search){
api.get(`client/search?q=${search}`).then(
(res) => {
return res.data;
}
).catch( e => {
console.log(e);
return [];
})
}
export default Dashboard;
解决方案
searchCharacters
不会返回一个 Promise 来链接。从 中返回api.get
Promise 链searchCharacters
。
function searchCharacters(search) {
return api
.get(`client/search?q=${search}`)
.then((res) => {
return res.data;
})
.catch((e) => {
console.log(e);
return [];
});
}
或者稍微简洁一点
const searchCharacters = (search) =>
api
.get(`client/search?q=${search}`)
.then((res) => res.data)
.catch((e) => {
console.log(e);
return [];
});
推荐阅读
- java - Android 视图的弱引用安全吗?
- javascript - 分配和传播数组有什么区别?
- python-3.x - InvalidArgumentError:无法创建 NewWriteableFile:文件名、目录名或卷标语法不正确。; 未知错误
- rust - Rust 是否支持比较结构实例而不比较它们的字段?
- gitlab - 如何将现有项目移动到组
- unix - 将字符串回显到变量时保留前导零
- java - Android性能优化问题(Layout with JustifiedTextViews and CodeViews)
- google-maps - 如何在 Flutter 上使用 Google Maps 设置活动标记
- java - 将 th:each 中对象的字符串与 Thymeleaf 连接起来
- angular - Angular:如何从 HTML 访问表单组内的表单控件