如何将参数传递给usePromise React钩子内的promise

Question

我创建了一个usePromiseReact Hook，它应该能够解析每一种javascript承诺，并返回每一个结果和状态：数据、解析状态和错误。我可以让它在不带任何参数的情况下传递函数，但当我试图更改它以允许使用参数时，我会得到一个无限循环。

const usePromise = (promise: any): [any, boolean, any] => {
const [data, setData] = useState<object | null>(null);
const [error, setError] = useState<object | null>(null);
const [fetching, setFetchingState] = useState<boolean>(true);
useEffect(() => {
setFetchingState(true);
promise
.then((data: object) => {
setData(data);
})
.catch((error: object) => {
setError(error);
})
.finally(() => {
setFetchingState(false);
});
}, [promise]);
return [data, fetching, error];
};
const apiCall = (param?: string): Promise<any> => {
return new Promise(resolve => {
setTimeout(() => {
resolve({ response: `Response generated with your param ${param}.` });
}, 500);
});
};
const App = (): React.Element => {
// How can I pass an argument to apiCall?
const [response, fetching, error] = usePromise(apiCall(5));
console.log("render"); // This logs infinitely
return <div>{JSON.stringify({ response, fetching, error })}</div>;
};

您可以在以下位置检查工作代码(不带参数(：https://codesandbox.io/s/react-typescript-fl13w

以及的错误(选项卡卡住，请注意(：https://codesandbox.io/s/react-typescript-9ow82

注意：我想在不使用来自NPM或类似的usePromise单函数库的情况下找到解决方案

Answer 1

自定义挂钩可能会被执行多次。您应该这样设计它，使您只想做一次的所有事情(例如API调用(都在useEffect钩子内。这可以通过回调来实现，然后在钩子中调用回调。

此外，类型安全性略高：

const usePromise = <T>(task: () => Promise<T>) => {
const [state, setState] = useState<[T?, boolean, Error?]>([null, true, null]);

useEffect(() => {
task()
.then(result => setState([result, false, null])
.catch(error => setState([null, false, error]);      
}, []); // << omit the condition here, functions don't equal each other²
return state;
};
// Then used as 
usePromise(() => apiCall(5));

---

_{²是的，这通常是一种糟糕的做法，但由于task不应该在这里改变，我认为这很好}

---

应要求，以下是我在一些项目中使用的版本：

export function useAPI<Q, R>(api: (query: Q) => Promise<R | never>) {
const [state, setState] = useState<{ loading?: true, pending?: true, error?: string, errorCode?: number, result?: R }>({ pending: true });
async function run(query: Q) {
if(state.loading) return;
setState({ loading: true });
try {
const result = await api(query);
setState({ result });
} catch(error) {
if(error instanceof HTTPError) {
console.error(`API Error: ${error.path}`, error);
setState({ error: error.message, errorCode: error.code });
} else {
setState({ error: error.message, errorCode: NaN });
}
}
}
function reset() {
setState({ pending: true });
}
return [state, run, reset] as const;
}