将项目部署到 Netlify 时出现 ReferenceError

Question

我在将我的 React 项目部署到 Netlify 时遇到一个问题，说我的配置文件信息视图中的 editUserInfo 函数未定义。此外，我正在使用 React-Router 在我的项目中切换视图。这在开发中非常有效，在我尝试访问配置文件视图之前，我的所有链接都可以正常工作。除此之外，站点部署没有任何问题。

这是我的个人资料视图的代码：

import React, { useEffect, useState } from "react";
import axios from "axios";
import UserInfo from "./user-info";
import { Col } from "react-bootstrap";
import MovieReelSpinner from "../MovieReelSpinner/MovieReelSpinner";
import InfoForm from "../form/info-form";
import FavoriteMovies from "./favorite-movies";
import DeleteModal from "./delete-modal";
import { URL } from "../../helpers/helpers";
import { useSelector, useDispatch } from "react-redux";
import { setUser, removeFromFavs } from "../../redux/features/userSlice";

import "../../styles/_profile-view.scss";

const ProfileView = ({ movies }) => {
  const favoriteMovies = useSelector(
    (state) => state.user.value.FavoriteMovies,
  );
  const userValues = useSelector((state) => state.user.value);
  const [show, setShow] = useState("");

  const token = localStorage.getItem("token");
  const user = localStorage.getItem("user");
  const dispatch = useDispatch();

  useEffect(() => {
    axios
      .get(`${URL}/users/${user}`, {
        headers: { Authorization: `Bearer ${token}` },
      })
      .then((res) => {
        const {
          Username,
          Password,
          Email,
          Birthday,
          FavoriteMovies,
        } = res.data;
        dispatch(
          setUser({
            Username,
            Password,
            Email,
            Birthday: Birthday.slice(0, 10),
            FavoriteMovies: movies.filter((movie) =>
              FavoriteMovies.includes(movie._id),
            ),
          }),
        );
      })
      .catch((err) => console.log(err));
  }, []);

  editUserInfo = ({ username, password, email, birthday }) => {
    axios
      .put(
        `${URL}/users/update/${user}`,
        {
          Username: username,
          Password: password,
          Email: email,
          Birthday: birthday,
        },
        {
          headers: { Authorization: `Bearer ${token}` },
        },
      )
      .then((res) => {
        localStorage.setItem("user", username);
        dispatch(
          setUser({
            Username: username,
            Password: password,
            Email: email,
            Birthday: birthday,
          }),
        );
        alert(`${username} has been updated!`);
      })
      .catch((err) => console.log(err));
  };

  removeFromFavorites = (id) => {
    axios
      .delete(`${URL}/users/${user}/movies/${id}`, {
        headers: { Authorization: `Bearer ${token}` },
      })
      .then((res) => dispatch(removeFromFavs(favoriteMovies.indexOf(id))))
      .catch((err) => console.log(err));
  };

  deleteUser = () => {
    axios
      .delete(`${URL}/users/${user}`, {
        headers: { Authorization: `Bearer ${token}` },
      })
      .then((res) => {
        alert(`${user} has been deleted`);
        localStorage.removeItem("user");
        localStorage.removeItem("token");
        window.open("/", "_self");
      });
    setShow("");
  };

  if (show === "update")
    return <InfoForm editUserInfo={editUserInfo} setShow={setShow} />;

  return (
    <Col>
      <UserInfo
        user={userValues.Username}
        email={userValues.Email}
        birthday={userValues.Birthday}
        setShow={setShow}
      />
      <DeleteModal show={show} setShow={setShow} deleteUser={deleteUser} />
      {favoriteMovies ? (
        <FavoriteMovies
          favoriteMovies={favoriteMovies}
          removeFromFavorites={removeFromFavorites}
        />
      ) : (
        <MovieReelSpinner />
      )}
    </Col>
  );
};

export default ProfileView;

引用错误：

ReferenceError: editUserInfo is not defined
    at Ay (profile-view.jsx:39)
    at bi (react-dom.production.min.js:157)
    at is (react-dom.production.min.js:267)
    at Bs (react-dom.production.min.js:250)
    at $s (react-dom.production.min.js:250)
    at Us (react-dom.production.min.js:250)
    at Fs (react-dom.production.min.js:243)
    at react-dom.production.min.js:123
    at b (scheduler.production.min.js:18)
    at aa (react-dom.production.min.js:122)

如有任何帮助，我们将不胜感激！

Answer 1

Netlify 的某些优化过程可能会删除 editUserInfo = ，因为它将被分配给一个全局变量，因为它缺少 var/let/const.

尝试将其更改为 const editUserInfo = ...，看看是否有帮助。

Answer 2

尝试在所有函数声明中添加 const/let/var

将项目部署到 Netlify 时出现 ReferenceError

ReferenceError when deploying project to Netlify

javascript

referenceerror

reactjs

netlify