javascript - 在每个组件上调用的用户 api

问题描述

你好，我使用 laravel 有后端 REST API 和 React 作为前端。

我的问题是在每条路线上多次调用用户 api。

如果我去，/category我收到了对用户 API 的请求，因为我需要有用户信息，比如是否是管理员；用户名；...，这是正常的，因为我在 App.js 上调用了这个 api 我试图在上做一个条件语句componentDidMount来知道我是否已经有用户数据处于我的状态，但是 React 给我返回infinite loop了一个this.setState({user: data})

所以我的问题是我可以一次调用 api 吗？或者我是否需要使用 Redux 存储一次用户数据，并使用这些数据？

我的 App.js：

import React from 'react';
import axios from 'axios';
import {BrowserRouter as Router, Switch, Route, Redirect} from 'react-router-dom';
import Login from "./pages/Login";
import Home from "./pages/Home";
import Profile from "./pages/Profile";
import Register from "./pages/Register";
import Header from "./components/Header";
import Administration from "./pages/Administration";
import './assets/main.css'
import './App.css'
import PrivateRoute from "./components/PrivateRoute";
import Category from "./pages/Category";
import Product from "./pages/Product";
import Order from "./pages/Order";
import User from "./pages/User";
import Support from "./pages/Support";
export default class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            redirectToHome: false,
            isLog: false,
            isAdmin: false,
            user: null,
        }
    }

    componentDidMount(){
        if (localStorage.getItem('token')){
            axios.post('auth/me')
                .then((res) => {
                this.setUser(res.data)
                 })
                .catch((err) => {
                    localStorage.removeItem('token')
                })
        }
    }

    setUser = (user) => {
        this.setState({user: user})
    }

    render() {
        if (this.state.redirectToHome){
            return <Redirect to={'/'} from={'/logout'} />
        }
        return (
            <Router>
                <div>
                    <Header user={this.state.user} setUser={this.setUser} />
                </div>
                <div className="mx-10">
                    <Switch>
                        <Route exact path="/" component={() => <Home user={this.state.user} />} />
                        <Route exact path="/login" component={() => <Login setUser={this.setUser} />} />
                        <Route exact path="/profile" component={() => <Profile user={this.state.user}/>} />
                        <Route exact path="/register" component={Register} />
                        <PrivateRoute exact path="/admin" component={() => <Administration user={this.state.user} />} />
                        <PrivateRoute exact path="/admin/categories" component={() => <Category />} />
                        <PrivateRoute exact path="/admin/products" component={() => <Product />} />
                        <PrivateRoute exact path="/admin/orders" component={() => <Order />} />
                        <PrivateRoute exact path="/admin/users" component={() => <User />} />
                        <PrivateRoute exact path="/admin/supports" component={() => <Support />} />
                    </Switch>
                </div>
            </Router>
        );
    }
};

标签： javascriptreactjs

javascript - 在每个组件上调用的用户 api

问题描述

解决方案

推荐阅读