在 ReactJs 中更改路由时停止请求答案

【问题标题】：Stop requesting when changing the route in ReactJs在 ReactJs 中更改路由时停止请求
【发布时间】：2021-05-19 04:38:42
【问题描述】：

我在 react js 中提出请求，并使用 useSelector 获取数据。所以在useEffect 中，我在请求之后显示来自后端的消息。

useEffect(() => {
  if (selector.response ? .message) {
    console.log(selector);
    message.success(selector.response?.message, 2);
    setLoading(false);
  }
  console.log('render');
}, [selector.response]);

代码工作正常，但是当我更改页面（路由）时出现问题。单击另一个菜单项，我转到另一个页面，当我返回时，再次触发useEffect，用户再次看到来自message.success(selector.response?.message, 2); 的消息。
问题：如何在我回到我的路线后停止每次显示消息并且只显示一次消息？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

你必须使用User Effects with Cleanup

您需要清理之前渲染或动作的效果。否则它将保持以前的状态

你会在官方教程中找到更多细节

userEffect Cleanup Process

更新答案

import React, {useState, useEffect} from "react";
export default function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    function handleChange(val) {
      setCount(val)
    }
    window.addEventListener('load', handleChange(1))

    return () =>{
      handleChange(0);
      console.log(count)
    };
  })

  return (
    <div className="App">
      {count}
    </div>
  );
}

这里我用count变量和setCount方法来设置count变量

在useEffect内部我创建了一个函数来负责设置计数值

然后我创建一个addEventListner，当页面加载时它将计数值设置为1

然后我为 clean up 调用一个匿名函数，这将删除之前设置的值 0

之后我设置了一个控制台来检查它是否设置了值

因此，当用户最初再次返回您的页面时，它会找到默认值，然后设置动态值。

你可以让它更有效的方式。我只是举个例子

下面我分享一个链接，可以帮助你处理 api 响应

How to call api and cleanup response using react usereffect hooks

【讨论】：

如果这里selector.response?.message我从api获取数据，如何cleanup状态？您能否为我的情况创建一个小例子？
@Asking 我刚刚用一个例子更新了我的答案。希望它会有所帮助
，你能帮忙吗stackoverflow.com/questions/66381227/…

【解决方案2】：

在您的情况下，您的组件似乎在页面更改时卸载并在用户返回时重新安装。当组件重新挂载时，useEffect 总是会触发。这就是它的工作原理。

回答您的问题，这是您可以为您的案件做的一件简单的事情。


// this will create a function that will return true only once
const createShouldShowSuccessMessage = () => {
  let hasShownMessage = false;
  ()=> {
    if(hasShownMessage) {
     return false;
    } else {
     hasShownMessage = true;
     return true;
    }
  }
};

const shouldShowSuccessMessage = createShouldShowSuccessMessage();

const SomeComponent = () => {
  useEffect(() => {
    if(shouldShowSuccessMessage()) {
     message.success(selector.response?.message, 2);
    }
    setLoading(false);
  }, [selector.response]);
}

我建议您使用更好的设置来在组件中执行副作用，但我希望我的回答对您有所帮助，直到您到达那里

【讨论】：

你能帮忙吗stackoverflow.com/questions/66303961/…
你能帮忙吗stackoverflow.com/questions/66381227/…