reactjs - 使用 useEffect() react HOC

Question

因此，我将 HOC 用于一般错误处理目的，如下所示:

import React, { useState, useEffect } from 'react'
import Modal from '../../UI/Modal/Modal'
const WithErrorHandler = (WrappedComponent, axios) => {
    const NewComponent = props => {
        console.log('UseState')
        const [error, setError] = useState(null)
        console.log('runs')
        useEffect(() => {
            const req = axios.interceptors.request.use(config => {
                console.log('request intercepted')
                return config
            })
            const res = axios.interceptors.response.use(null, error => {
                setError(error)
                return Promise.reject(error)
            })
            
            return () => {
                axios.interceptors.request.eject(req)
                axios.interceptors.response.eject(res)
            }
        }, [])
        return (
            <div>
                {console.log('render')}
                {error ? (
                    <Modal clickHandler={() => setError(null)}> {error.message}</Modal>
                ) : null}
                <WrappedComponent {...props} />
            </div>
        )
    }
    return NewComponent
}
export default WithErrorHandler

我遇到的问题是我有一个组件在它的 useEffect() 中触发 axios 请求。
当我尝试用我的 WithErrorHandler 包装这个组件时，包装的组件的 useEffect 首先触发，然后 HOC withErrorHandler 的 useEffect 运行。这会导致 axios 请求比 HOC 注册 axios 拦截器的速度更快。关于如何解决这个问题的任何想法都将受到赞赏。

Answer 1

您可以定义一个中间状态，以防止呈现包装组件。

const WithErrorHandler = (WrappedComponent, axios) => {
  const NewComponent = (props) => {
        
    const [ready, setReady] = useState(false); // HERE

    console.log("UseState");
    const [error, setError] = useState(null);
    console.log("runs");
    useEffect(() => {
      const req = axios.interceptors.request.use((config) => {
        console.log("request intercepted");
        return config;
      });
      const res = axios.interceptors.response.use(null, (error) => {
        setError(error);
        return Promise.reject(error);
      });

      setReady(true); // HERE

      return () => {
        axios.interceptors.request.eject(req);
        axios.interceptors.response.eject(res);
      };
    }, []);

    if (!ready) return null; // HERE

    return (
      <div>
        {console.log("render")}
        {error ? (
          <Modal clickHandler={() => setError(null)}> {error.message}</Modal>
        ) : null}
        <WrappedComponent {...props} />
      </div>
    );
  };
  return NewComponent;
};

它的作用是确保 axios 拦截器已初始化，并且可以很好地呈现包装的组件。
而不是 if (!ready) return null;你可以从你的 HOC 返回一个更合理的状态，例如， if (!ready) return <p>Initializing...</p>