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

Question

您好，我正在使用 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>

Answer 1

要只调用一次用户获取代码，您需要一个地方来管理用户状态以检查它之前是否被调用过。你有两个不错的选择。您可以使用 Redux 并在全局状态中缓存用户值，或者您可以在传递状态中使用 Context API 和缓存。根据您拥有的路由数量，我会诚实地建议使用 redux，因为它（在我看来）对于较大的应用程序更好。上下文可能会变得混乱，因为它没有严格区分操作、缩减器和当前状态。