主页 / user-10152847

Bruno Nobre's questions

Martin Hope
Bruno Nobre
Asked: 2024-12-31 03:42:06 +0800 CST
  • 5

我有两个组件 Auth 和 Main，分别代表应用的登录屏幕和主屏幕。这两个组件均由组件 AuthOrApp 调用，组件根据用户的状态 ID 选择显示哪一个。

//component AuthOrApp

import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';

import { login } from '../store/userSlice';
import { addShops } from '../store/shopsSlice';
import Auth from '../screens/Auth';
import Main from '../navigators/Main';
import { getData } from '../common';

export default props => {
    const [start, setStart] = useState(true);
    const dispatch = useDispatch();
    const user = useSelector(state => state.user);

    const fetchData = async () => {
        if (!user.id) {
            const userData = await getData();
            if (userData.id) {
                dispatch(addShops(userData.filterShops));
                dispatch(login({ name: userData.name, id: userData.id }));
            } else {
                setStart(false);
            }
        } else {
            setStart(false);
        }
    }

    useEffect(() => {
        fetchData();
    }, [user])

    return (!user.id) ? <Auth /> : <Main />;
}

退出时，用户状态id被清除，应用返回登录界面，问题在于它再次挂载了Auth和Main组件。

我不明白为什么它会重新组装组件而不是直接渲染。有人能给我解释一下吗？我该如何阻止它再次安装？

javascript
Martin Hope
Bruno Nobre
Asked: 2024-12-29 00:03:29 +0800 CST
  • 5

我有以下代码并且拦截器工作得很好：

import axios from 'axios';
import { useDispatch } from 'react-redux';

const axiosPrivate = axios.create({
    baseURL: 'http://localhost:8080'
});

export default useAxiosPrivate = () => {
    const dispatch = useDispatch();

    useEffect(() => {
        const responseIntercept = axiosPrivate.interceptors.response.use(
            response => response,
            async (error) => {
                const prevRequest = error?.config;
                if (error.response?.status === 401 && error.response.data?.code === 'AccessTokenExpired' && !prevRequest.sent) {
                    prevRequest.sent = true;
                    const { refreshToken } = await getData();
                    return axios.post('http://localhost:8080/auth/refresh-token', { refreshToken })
                        .then(async (_) => {
                            return axiosPrivate(prevRequest);
                        })
                        .catch(async (error) => {
                            dispatch(login({ name: '', id: '' }));
                            return Promise.reject(error);
                        });
                }
                return Promise.reject(error);
            }
        );

        return () => {
            axiosPrivate.interceptors.response.eject(responseIntercept);
        }
    }, [])

    return axiosPrivate;
}

然而，出于好奇，我尝试将 axiosPrivate 常量放置在组件代码中，如下所示：

export default useAxiosPrivate = () => {
    const axiosPrivate = axios.create({
        baseURL: 'localhost:8080'
    });

    const dispatch = useDispatch();
...}

执行此操作时，在某些组件中 useAxiosPrivate 钩子拦截器可以正常工作，而在其他组件中则无法正常工作，就好像它们不存在一样。

谁能告诉我为什么会出现这种现象？

react-native