使用用户输入更新 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 的各个部分(某些)是否来自最终用户?哪个?例如,我假设 apiUrlid 没有,但其他人看起来可能......? 将最终 url 作为 useEffect 中的因变量传递,例如 [finalUrl] 【参考方案1】:

我将假设 apiUrlid 永远不会改变,但您在 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]);

timefinalStartfinalEnd发生变化时,回调将被再次调用。


请注意,当依赖关系发生变化时,即使请求尚未完成,您也需要忽略或取消先前的请求。我不使用 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”?

NextJs:在 React useEffect Hook 内使用变量调用 setInterval

useEffect - 更新状态时防止无限循环