react- express：获取数据时，当用户连接时，可以在重新加载上工作

Question

我已经使用nodejs/express/mongodb的react部署了我的第一个应用程序，但是我正在通过一个无法找到任何解决方案的错误运行，所以我来这里找到了一些帮助。

这是一个应用：

用户连接后，他可以访问数据，但是如果重新加载页面，则获取不再工作。

这是获取发生的代码：

import './App.css';
import "./index.css"
import React, {useState, useEffect, useRef} from 'react'
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'
import Register from './components/Register';
import Login from './components/Login'
import Home from './pages/Home';
import Auth from './pages/Auth';
import Movie from './pages/Movie'
import NotFound from './pages/Notfound';
import FavoritesMovies from './pages/Favorites';
import UserContextProvider from './contexts/UserContext';
import RequireAuth from './contexts/RequireAuth';

function App() {

  const defaultUser = {name:"Stranger", email: "[email protected]"}

  const [moviesList, setMoviesList] = useState([])
  const [initialML, setInitialML] = useState([])
  const [userInfo, setUserInfo] = useState(defaultUser)
  // console.log(userInfo.name)
 
useEffect( () => {getMovies()}, [])

  function getMovies() {
    fetch('/movies')
    .then(response => response.json())
    .then(data => {
      const movies= data.movies
      setMoviesList(movies) 
      setInitialML(movies) 
    })
    .catch(err => console.log(err))
  
}

  return (
    <div className="App">
        <UserContextProvider user={{userInfo, setUserInfo}}>
          <Router>
            <main>
              <Routes>
                <Route path="/" element={<Home moviesList={moviesList} setMoviesList={setMoviesList} initialMovieList={initialML}/>}/>
                <Route path="/auth/*" element={<Auth />} >
                    <Route path="login" element={<Login/>} />
                    <Route path="register" element={<Register/>} />
                    <Route path="logout" element={<Register/>} />
                    {/* <Route path="*" element={<NotFound />}/> */}
                </Route>
                <Route path="movies/:movieId" element={<Movie moviesList={moviesList} setMoviesList={setMoviesList}  />} />
                <Route path="favorites" element={
                      <RequireAuth> 
                        <FavoritesMovies />
                      </RequireAuth>} />
                <Route path="*" element={<NotFound />}/>
              </Routes>
            </main>
          </Router>
          </UserContextProvider> 
     

    </div>
  );
}

export default App;

Answer 1

通常，您的代码可以像这样修改，粗略：

• 从 app 中删除fetch/电影，然后将其放入 home - 这将确保在时确保使用ferseffect/fetch触发器/路由被击中。并且是保持分离和井井有条的好习惯。

应用程序组件

function App() {

  const defaultUser = {name:"Stranger", email: "[email protected]"}
  const [userInfo, setUserInfo] = useState(defaultUser)

  return (
    <div className="App">
        <UserContextProvider user={{userInfo, setUserInfo}}>
          <Router>
            <main>
              <Routes>
                <Route exact path="/" element={<Home />}/>
                <Route path="/auth/*" element={<Auth />} >
                    <Route path="login" element={<Login/>} />
                    <Route path="register" element={<Register/>} />
                    <Route path="logout" element={<Register/>} />
                    {/* <Route path="*" element={<NotFound />}/> */}
                </Route>
                <Route path="movies/:movieId" element={<Movie moviesList={moviesList} setMoviesList={setMoviesList}  />} />
                <Route path="favorites" element={
                      <RequireAuth> 
                        <FavoritesMovies />
                      </RequireAuth>} />
                <Route path="*" element={<NotFound />}/>
              </Routes>
            </main>
          </Router>
          </UserContextProvider> 
    </div>
  );
}

export default App;

home组件

function Home() {
  const [moviesList, setMoviesList] = useState([])
  const [initialML, setInitialML] = useState([])
 
  useEffect( () => {getMovies()}, []);

  function getMovies() {
    fetch('/movies')
    .then(response => response.json())
    .then(data => {
      const movies= data.movies
      setMoviesList(movies) 
      setInitialML(movies) 
    })
    .catch(err => console.log(err))
  }

  return (....)
}

，我不确定您使用的是哪个版本，但是如果不是v6，则可以检查react.router。 ：//v5.reactrouter.com/web/api/switch“ rel =“ nofollow noreferrer”> https://v5.reactrouter.com/web/api/switch

Answer 2

<Route path="/" element={<Home moviesList={moviesList} setMoviesList={setMoviesList} initialMovieList={initialML}/>}/>

在此行或任何地方都有 MovieList 和 initialml 尝试执行：

<Route path="/" element={<Home moviesList={moviesList && moviesList} setMoviesList={setMoviesList} initialMovieList={initialML && initialML}/>}/>

您的提取请求是异步的，因此需要一些时间，但是在此之前已经呈现了汇编，然后才看起来很可能看起来很可能数据没有被获取。