在每个组件上调用的用户 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，因为它（在我看来）对于较大的应用程序更好。上下文可能会变得混乱，因为它没有严格区分操作、缩减器和当前状态。