使用用户输入更新 useEffect api 调用 url
Posted
技术标签:
【中文标题】使用用户输入更新 useEffect api 调用 url【英文标题】:Updating useEffect api call url with user inputs 【发布时间】:2021-11-19 13:16:24 【问题描述】:我正在做一个项目,我需要用用户输入的日期更新数据图表。我在如何更新 useEffect 挂钩中的 url 时遇到了麻烦。这是我的相关代码:
const finalUrl =`$apiUrlid=$id&timing=$time&start=$finalStart&end=$finalEnd`;
console.log(finalUrl);
useEffect(() =>
axios
.get<AxiosResponse>(finalUrl,
headers:
"Content-Type": "application/json"
)
.then(response =>
setData(response);
)
.catch(error =>
console.log(error);
);
, []);
console.log(data);
在我接到 axios 电话之前,一切看起来都很好。我无法让 useEffect 使用更新后的网址。记录响应数据每次都会给出相同的结果。 “finalUrl”中的所有值都来自用户。
【问题讨论】:
finalUrl
的各个部分(某些)是否来自最终用户?哪个?例如,我假设 apiUrl
和 id
没有,但其他人看起来可能......?
将最终 url 作为 useEffect
中的因变量传递,例如 [finalUrl]
【参考方案1】:
我将假设 apiUrl
和 id
永远不会改变,但您在 API URL 中使用的所有其他内容都是来自用户的输入。
如果是这样,您需要在 useEffect
回调中重建 URL,并使回调依赖于这些用户输入,如下所示:
useEffect(() =>
const finalUrl =`$apiUrlid=$id&timing=$time&start=$finalStart&end=$finalEnd`;
axios
.get<AxiosResponse>(finalUrl,
headers:
"Content-Type": "application/json"
)
.then(response =>
setData(response);
)
.catch(error =>
console.log(error);
);
, [time, finalStart, finalEnd]);
当time
、finalStart
或finalEnd
发生变化时,回调将被再次调用。
请注意,当依赖关系发生变化时,即使请求尚未完成,您也需要忽略或取消先前的请求。我不使用 axios,但据我了解,它有一个“取消/取消令牌”,您可以使用它来执行此操作。这是使用fetch
的样子,它使用AbortController
:
useEffect(() =>
const finalUrl =`$apiUrlid=$id&timing=$time&start=$finalStart&end=$finalEnd`;
// Create the controller so we can cancel the request
const controller = new AbortControlller();
// Pass `signal` to fetch vvvvvvvvvvvvvvvvvvvvvvvvvvv
fetch<DataType>(finalUrl, signal: controller.signal)
.then(response =>
if (!response.ok)
throw new Error(`HTTP error $response.status`);
return response.json();
)
.then(setData)
.catch(error =>
console.log(error);
);
// Return a cleanup callback
return () =>
// Cancel the request since its response would be out of date
controller.abrt();
;
, [time, finalStart, finalEnd]);
console.log(data);
【讨论】:
天哪,我知道这很简单。非常感谢!你拯救了我的一天。以上是关于使用用户输入更新 useEffect api 调用 url的主要内容,如果未能解决你的问题,请参考以下文章
如何在 React 中使用 useEffect 挂钩调用多个不同的 api
act 和 useState 的单元测试错误,在 useEffect 中进行 API 调用
React - 是不是在 useEffect 中调用 API
我应该如何测试使用 Typescript 进行 api 调用的 React Hook “useEffect”?