您应该在react.useeffect（）中调用navagiate（），而不是首先渲染组件时

Question

我在上下文的一个功能之一中使用导航有问题。我有一个称为GetCurrencyFrompath的函数，该功能通过USECONTEXT提供给了我的组件。此功能在使用效果中，仅在组件的MOUNT上调用，以从查询参数获取货币（示例路径： /historingrates？currency = usd）。如果某人尝试将货币（查询参数）传递给我的应用程序无效，我想将用户导航到USD的默认货币。因此，在我的功能中，我有一个“ if”检查，如果查询参数还可以，如果不是，则导航。因此，当用户传递此错误的查询参数时，我的页面安装座，应立即调用，但这不是，但是我会收到此错误。如果我在使用效率下直接调用导航，则没有错误，但是一旦我尝试将此代码外包到上下文函数进行相同的逻辑，我就会遇到错误。

PS。我想将此逻辑保留在此上下文功能中，直接将其置于使用效果并不是我要实现的目标（尽管它可以解决问题）

// component

const Header: React.FC = () => {
  const { getCurrencyFromPath, currency, setCurrency } = React.useContext(HistoricalRatesContext);

  const navigate = useNavigate();

  React.useEffect(() => {
    getCurrencyFromPath();
  }, []);

  const onPickerValueChange = (currency: Currencies) => {
    navigate(`/HistoricalRates?currency=${currency}`);
    setCurrency(currency);
  };

  return (
    <div className={classes.chartHeader}>
      <PageHeader text={`USD historical rates`}></PageHeader>
      <CurrencyPicker className={classes.pickerAdditional} value={currency} 
       changeValue={onPickerValueChange} blockedCurrencies={[Currencies.PLN]} />
    </div>
  );
};

export default Header;

// context

import { useNavigate } from 'react-router-dom';

.
.
.

const navigate = useNavigate();

const getCurrencyFromPath = () => {
    let currency = query.get('currency') || '';

    if (!isValidCurrency(currency)) {
      currency = Currencies.USD;
      navigate(`/HistoricalRates?currency=${currency}`);
    }

    setCurrency(currency as Currencies);
  };

Answer 1

这部分不应该在此路线 /历史货币的组件中？货币= $ {货币}

  React.useEffect(() => {
    getCurrencyFromPath();
  }, []);