如何使用调用API在UseEffect钩子内部工作的Helper函数

Question

我是ReactJS的新手，我正在努力使useEffect正常工作。下面的代码可以正常工作:

const [expenditureItems, setExpenditureItems] = useState([]);
useEffect(() => {
async function getExpenditureItems() {
const financeUrl = "http://blah.blah.blah/blah";
const filter = {"type": "Expenditure"}
const response = await axios.post(financeUrl, filter);
setExpenditureItems((Array.from(response.data)));
}
getExpenditureItems();
}, []);

但是，我已经在这里的帮助文件中定义了相同的函数，并且宁愿不重复代码或在另一个地方定义URL:

import axios from 'axios';
const financeUrl = "http://blah.blah.blah/blah";
let response = ''
async function getDocuments(filter=null) {
if(!filter) {
response = await axios.get(financeUrl);
}
else {
response = await axios.post(financeUrl, filter);
}
console.log(response.data);
return Array.from(response.data);}
...More Stuff Here...
export {getDocuments, createDocument, updateDocument, deleteDocument}

我知道helper方法本身工作正确，返回的数据看起来与不使用helper方法返回的数据完全相同。以下是我到目前为止根据我在这里读到的内容所做的尝试:https://www.benmvp.com/blog/helper-functions-react-useeffect-hook/

useEffect(() => {
const filter = {"type": "Expenditure"}
setExpenditureItems(getDocuments(filter));
}, []);

我也尝试过这种想法，也许在useEffect中需要async，因为底层函数是async:

useEffect(() => {
async function getExpenditureItems() {
const filter = {"type": "Expenditure"}
setExpenditureItems(getDocuments(filter));
}
getExpenditureItems();
}, []);

我尝试使用该链接中描述的useCallback方法，但似乎没有任何作用。我确信我在这里错过了一些简单的东西，或者我不了解useEffect是如何工作的，这阻止了它的工作。什么好主意吗?

Answer 1

您最后一次尝试的提示是您使函数async，但在该函数中您没有await任何东西。

getDocuments返回一个Promise。你需要await它:

useEffect(() => {
async function getExpenditureItems() {
const filter = {"type": "Expenditure"}
const documents = await getDocuments(filter);
setExpenditureItems(documents);
}
getExpenditureItems();
}, []);

或者只是:

useEffect(() => {
async function getExpenditureItems() {
setExpenditureItems(await getDocuments({"type": "Expenditure"}));
}
getExpenditureItems();
}, []);

Answer 2

嘿Chopps，看起来你需要awaitgetDocuments辅助函数，否则你正在尝试用Promise设置状态。在你的第一个例子中，它没有发生，因为你已经在等待Promise被解析const response = await axios.post(financeUrl, filter);

useEffect(() => {
const filter = {"type": "Expenditure"}
setExpenditureItems(await getDocuments(filter));
}, []);