javascript - HOC 没有设置正确的值

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" />;
  };
};