reactjs中如何從頂層的API獲取數據？

Question

嘿伙計們，我正在嘗試從 API 和頂層獲取數據。 如果您在代碼中看到：console.log(personFeatures) 打印空列表 ([])。 我想打印一些東西，並以此為基礎擁有不同的導航菜單。 導航將是 object，類似於導航 = [{item: 1}]。 任何想法如何在頂層打印？ 謝謝

const MainLayout = ({ children }) => {

    const account = useSelector((state) => state.account);
    let history = useHistory();

    const classes = useStyles();
    const theme = useTheme();
    const matchDownMd = useMediaQuery(theme.breakpoints.down('md'));

    // Handle left drawer
    const leftDrawerOpened = useSelector((state) => state.customization.opened);
    const dispatch = useDispatch();
    const handleLeftDrawerToggle = () => {
        dispatch({ type: SET_MENU, opened: !leftDrawerOpened });
    };

    let personFeatures = []    

    React.useEffect(() => {
        try {
            // Retrieve the person (API Request)
            axios.get(configData.API_SERVER + 'person/' + account.user.person_id, {
                headers: {
                    Authorization: account.token
                }
            }).then(function (response) {
    
                if (response.status === 200 ){
                    const personData = response.data;
                    const product = personData.products;
    
                    if (product.length === 0 ){
                        history.push('/rproduct')
                    } else {
                        const features = personData.features;

                        personFeatures = features;

                    }
                }
            }).catch(function (error) {
                history.push('/error');
            });
        } catch (error) {
            history.push('/error');
        }
    
        dispatch({ type: SET_MENU, opened: !matchDownMd });
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [matchDownMd]);

    console.log(personFeatures);

    const navigation = []

    if (personFeatures === 1) {
        navigation = [1]
    } else {
        navigation = [2]
    }

    return ( 
        <div className={classes.root}>
            
            <CssBaseline />
            {/* header */}
            <AppBar
                enableColorOnDark
                position="fixed"
                color="inherit"
                elevation={0}
                className={leftDrawerOpened ? classes.appBarWidth : classes.appBar}
            >
                <Toolbar>
                    <Header handleLeftDrawerToggle={handleLeftDrawerToggle} />
                </Toolbar>
            </AppBar>

            {/* drawer */}
            <Sidebar drawerOpen={leftDrawerOpened} drawerToggle={handleLeftDrawerToggle} />

            {/* main content */}
            <main
                className={clsx([
                    classes.content,
                    {
                        [classes.contentShift]: leftDrawerOpened
                    }
                ])}
            >
                {/* <Main open={leftDrawerOpened}> */}
                {/* breadcrumb */}
                <Breadcrumbs separator={IconChevronRight} navigation={navigation} icon title rightAlign />
                <div>{children}</div>
                {/* </Main> */}
            </main>
            <Customization />
        </div>
    );
};

Answer 1

使用 React Context 包裝您的應用程序（用於全局狀態）並在該提供程序中獲取數據。