如何避免刷新后显示 state 数据？

Question

我有 2 个组件，A 和 B。

• 在组件 B 中，我从 API 请求中获取一个值，我通过单击 B 中存在的按钮将其发送到组件 A。

• 在组件 B 中：

   axios.get('<api url>').then(res => { this.props.navigate('/', { data: res.data.successMsg }) })

因此，单击 B 中的按钮时，如果successMsg工作正常，我将被重定向到组件 A，我可以使用此成功消息显示带有成功消息的警报。 到这里为止还好。

现在，当我刷新此页面时，它再次显示成功消息。 我使用组件 A 中的 useLocation 挂钩来检查 state：

import { useLocation } form 'react-router-dom';

export function B(){
  const [showAlert, setShowAlert] = useState(false)
  const location1 = useLocation();

  useEffect(() => {
    if (location1.state !== null) {
      setShowAlert(true)
      window.setTimeout(() => {
        location1.state = null
      }, 8000)
    }
  }, [])
}

export default B

这个if语句在我每次刷新页面时也有效，所以它没有任何区别，并且在每次重新加载时都会呈现成功消息，这是我不想要的。 我只想在重定向后显示成功警报，即单击按钮。 如何区分刷新和重定向，以便在刷新时停止消息？ 或者如果有其他选择/想法，请告诉我。 注意：我已经尝试过performance选项，但是在重定向和刷新时，它只显示了“重新加载”选项。

Answer 1

您可以使用window object 区分两者：

if (window.performance && (window.performance.navigation.type === "1")) {
    //It was a refresh
} else {
    //Something else
}

或者，您可以使用这个：

if (window.performance.getEntriesByType("navigation")[0].type === "reload") {
    //reload
} else {
    //something else
}

Answer 2

您不能改变location object。 您将需要手动清除目标组件中传递的路由 state。 在没有任何 state 的情况下发出到当前路径的重定向。

例子：

import { useLocation, useNavigate } form 'react-router-dom';

export function B(){
  const { pathname, state } = useLocation();
  const navigate = useNavigate();

  const [showAlert, setShowAlert] = useState(state !== null);

  useEffect(() => {
    if (showAlert) {
      window.setTimeout(() => {
        navigate(pathname, { replace: true });
      }, 8000);
    }
  },[])

  ...
}

export default B;