如何从AXIOS自定义组件发出事件到加载板组件

Question

我有此架构组件...

LoginPage                  => Form      
useAuth                    => Controller
useAuthenticationServices  => Services
useOpenApi                 => Custom Axios with interceptors

当我提交数据（（1.2）HandlesubmitClick）时，我可以从服务器API（1.2＆gt; 2,2＆gt; 3.2＆gt; 4 axios ...）获取数据，因此此工作正常。我的问题是，在我的usepenapi组件（usecontext，usestate，useffect ...我总是会遇到挂钩错误）中，不能使用某种挂钩。但是，当Axios开始请求时，我需要（4.1）事件更改状态组件（setloading - ＆gt; true）。哪个更好地做到这一点？我现在可以从dom（document.body.classlist.add（'loading-indicator'））更改CSS，但我相信最糟糕的方法。

(1) const LoginPage = (props) => {
     (1.1) const handleSubmitClick = async (props, context) => {
        (1.2) const ret = await doLogin(state.username, state.password)
        ..
        
(2) const useAuth = () => {     
     (2.1) const doLogin = async (username, password) => {
        (2.2) const ret = await login(username, password)
        ..
        
(3) const useAuthenticationServices = () => {
    (3.1) const login = async (email, password) => {
        (3.2) const ret = await openApi.post('/useraccounts/Login', payload)
        ..
            
(4) const useOpenApi = () => {          
        const openApi = .create({
            baseURL: process.env.SERVICE_URL
        });
        
        (4.1) openApi.interceptors.request.use(async config => {
        ..
        
        return config;
    }

基本上，我还有

        <ToastContainer...
          <MyCustomContext....  
            <LoadingOverlay....  <<<need set isLoading = true
                <LoginPage  -> call AxiosCustom(openApi -> 4.1)

另一种设置上下文IM我的axioscustom生成/emit事件是否加载覆盖了组件？

Answer 1

您可以在两个子级组件之间共享父级变量（IS负载）。然后，使用使用效果挂钩观察LoadingOverlay组件中的变量。

function ParentComponent() {
    const [isLoading, setIsLoading] = false;

    const modifyIsLoading = (value) => {
       setIsLoading(value);
    }
    return <LoadingOverlay isLoading={isLoading} modifyIsLoading={modifyIsLoading}>
        <LoginPage modifyIsLoading={modifyIsLoading}
        </LoginPage>
     </LoadingOverlay>
}

function LoginPage(props){
     const axiosCall = () => {
         doAxiosCall().then(res => {
              props.modifyIsLoading(true);
         })
     }
}

function LoadingOverlay(props){
     useEffect(() => {
         console.log(props.isLoading) // changes every time the parent isLoading value changes
     }, [props.isLoading])
}