Question

我在创建简单的HOC时遇到问题，当没有查询参数时应将其重定向到404。否则，它应该只返回一个组件。

import React, { useState, useEffect } from 'react';
import { Redirect } from 'react-router-dom';

import { api } from '../utils/api';

export default (WrappedComponent, queryParamKey) => {
   return () => {
   const [ paramAvailability, setParamAvailability ] = useState(false);

  useEffect(() => {
    const urlParams = new URLSearchParams(document.location.search);
    const token = urlParams.get(queryParamKey);

    setParamAvailability(!!token);
  });

  return paramAvailability ? (
    <WrappedComponent {...this.props} />
  ) : <Redirect to="/404" />;
  };
};

因此，每当我包装一个组件时，它就会重定向到404，无论有没有可用的查询参数。

Answer 1

paramAvailability默认为false。 useEffect在初始渲染后首先调用。因此，您始终Redirect。

要修复您的HOC，只需将检查逻辑提取到一个单独的函数中，然后使用它来设置默认状态：

export default (WrappedComponent, queryParamKey) => {
   return props => {

    function checkParam() {
        const urlParams = new URLSearchParams(document.location.search);
        const token = urlParams.get(queryParamKey);
        return !!token;
    }

   const [ paramAvailability, setParamAvailability ] = useState(checkParam());


  useEffect(() => {
    setParamAvailability(checkParam());
  });

  return paramAvailability ? (
    <WrappedComponent {...props} />
  ) : <Redirect to="/404" />;
  };
};

HOC没有设置适当的值

1 个答案: