如何在useEffect中包装使用钩子的函数？
我编写了一个函数来进行API调用。通常，我只需将其包装在一个useEffect中，并将其放入需要它的同一个文件中，但我正在尝试编写更简洁的代码。所以我做了下面的事。
在我的component.js文件中，我有以下内容：
import { apiCall } from '../../../framework/api.js';
import { useEffect, useState } from 'react';
export const Table = () => {
const [ resp, setResp ] = useState();
useEffect(() => {
console.log(apiCall());
}, []);
return(
<>
{ resp &&
resp.map(([key, value]) => {
console.log("key: " + key);
return(
<SomeComponent />
);
})
}
</>
);
}在我的api.js文件中，我有以下内容：
import axios from 'axios';
import { useState } from 'react';
export const apiCall = () => {
const [ resp, setResp ] = useState();
axios.get('https://some.domain/api/get').then((response) => {
setResp(response.data);
});
if(resp) return resp;
}这总是返回一个错误(无效的钩子调用)。钩子调用只能在函数组件的主体内调用。)
如果我重写了我的component.js，并将axios调用直接包含在useEffect中，而不是从外部文件调用函数apiCall()，那么它显然没有问题。
我想我知道这与我在apiCall函数中使用钩子和在useEffect中包装调用有关。但是，如果我不把它包装在useEffect中，它就会持续运行，我也不想这样做。
回答 3
Stack Overflow用户
发布于 2022-01-13 03:08:36
您必须遵循自定义钩子命名约定才能工作。您可以在这里查看文档：https://reactjs.org/docs/hooks-custom.html
无论如何，我相信在这种情况下，这应该是可行的：
import axios from 'axios';
import { useState } from 'react';
export const useApiCall = () => {
const [ resp, setResp ] = useState();
axios.get('https://some.domain/api/get').then((response) => {
setResp(response.data);
});
if(resp) return resp;
}然后在component.js中，您可以调用useApiCall()
Stack Overflow用户
发布于 2022-01-13 03:26:31
通常，我们都是这样做的
export const useApiCall = () => {
const [ resp, setResp ] = useState();
useEffect(() => {
axios.get('https://some.domain/api/get').then((response) => {
setResp(response.data);
});
}, []);
return resp;
}然后像这样使用它
export const Table = () => {
const resp = useApiCall();
return(
<>
{ resp &&
resp.map(([key, value]) => {
console.log("key: " + key);
return(
<SomeComponent />
);
})
}
</>
);
}函数名中的前缀"use“很重要，这就是我们如何定义自定义钩子的方法。
Stack Overflow用户
发布于 2022-01-13 03:18:12
React "useState“在函数"apiCall”中被调用，它既不是React函数组件，也不是自定义React 函数。React组件名称必须以大写的字母开头。React名称必须以单词"use"开头。
您可以使用以下方法。
import { useState } from 'react';
export const ApiCall = () => {
const [state, setState] = useState();
};或
import { useState } from 'react';
export const useApiCall = () => {
const [state, setState] = useState();
};https://stackoverflow.com/questions/70690911
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号