小编the*_*d3r的帖子

我想使用 FastAPI 为我的 React 前端提供服务。目标是用户对 Javascript 的依赖为零。用户只需下载 Python 代码、启动服务器并在本地主机上查看网站即可。

我的文件夹结构是：

- my-fullstack-app\n  - frontend/\n    - build/\n    - public/\n    - ...\n    - package.json\n  - backend/\n    - main.py\n    - static/\n

我跑去npm run build生成frontend/build/以下内容的文件夹：

build/\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 asset-manifest.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 favicon.ico\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 logo192.png\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 logo512.png\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 manifest.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 robots.txt\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 static\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 css\n    \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 main.073c9b0a.css\n    \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 main.073c9b0a.css.map\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 js\n    \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 787.cda612ba.chunk.js\n    \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 787.cda612ba.chunk.js.map\n    \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 main.af955102.js\n    \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 main.af955102.js.LICENSE.txt\n    \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 main.af955102.js.map\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 media\n        \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg\n

frontend/build/我把里面的文件夹内容复制了 …

我试图根据屏幕宽度 < 768p 来以不同方式渲染组件。

如果小于 768p，则加载汉堡菜单。如果没有，则加载整个菜单。

这是我使用的代码。问题是，当页面首次加载时，我无法观察到变化。但是当我将浏览器屏幕缩小然后将其增加到原始大小时；效果发生。

我认为这是因为 React 是在服务器端渲染的。但仍然不明白为什么它会通过将屏幕变小然后再变大来起作用。

import "twin.macro"
import { Global, css } from "@emotion/core"

import { useState, useEffect } from "react"

const Navbar = () => {
  const useWindowDimensions = () => {
    const hasWindow = typeof window !== "undefined"

    function getWindowDimensions() {
      const width = hasWindow ? window.innerWidth : null
      const height = hasWindow ? window.innerHeight : null
      return {
        width,
        height,
      }
    }

    const [windowDimensions, setWindowDimensions] = useState(
      getWindowDimensions()
    )

    useEffect(() => { …

我的 redux 相关导入如下 -

来源： https: //github.com/theairbend3r/pokedex

import { useDispatch, useSelector } from "react-redux"

import {
  fetchPokemonNameUrl,
  NUMBER_OF_POKEMON,
  selectorPokemon,
} from "./pokemonCardsSlice"


const dispatch = useDispatch()
const pokemonList = useSelector(selectorPokemon)

我有一个useEffect块如下 -

  useEffect(() => {
    return dispatch(fetchPokemonNameUrl())
  }, [dispatch])

我想做的事 -

 useEffect(() => {
    if (pokemonList.length !== NUMBER_OF_POKEMON) {
      return dispatch(fetchPokemonNameUrl())
    }
  }, [dispatch])

但当我这样做时，我收到警告 -

React Hook useEffect has a missing dependency: 'pokemonList.length'. Either include it or remove the dependency array.eslint(react-hooks/exhaustive-deps)

我究竟做错了什么？

我正在使用 react-router-dom v5.2。

登录后，我希望我的页面重定向到/homefrom /。登录表单位于/。

当我尝试在没有任何异步功能的情况下执行身份验证（即，将用户名和密码与 react 中的硬编码值进行比较）时，一切正常。

但是当我使用 express 和 mongo 执行身份验证时，登录时的重定向停止工作。如果我再次登录，则会发生重定向。受保护的路由仍然有效（如果用户未登录，则重定向到登录页面）。

这是我在 express + mongo ie 中使用 do auth 的问题的一个小演示。异步还原。这没有按预期工作。https://youtu.be/Zxm5GOYymZQ

这是我使用硬编码用户名和密码（均为“测试”）进行身份验证的应用程序链接。这里没有异步。这按预期工作。用户名和密码都是“test”。https://poke-zoo.herokuapp.com/

这是App.js：

const ProtectedRoute = ({ component: Component, ...rest }) => {
  const authState = useSelector(selectorAuth)
  // const location = useLocation()
  return (
    <Route
      {...rest}
      render={props => {
        if (authState.isUserLoggedIn) {
          return <Component {...props} />
        } else {
          return (
            <Redirect
              to={{
                pathname: "/",
                state: {
                  from: props.location,
                }, …