javascript 将项目部署到Netlify时出现ReferenceError

pod7payv  于 2023-06-28  发布在  Java
关注(0)|答案(3)|浏览(99)

我在将我的React项目部署到Netlify时遇到了一个问题,说我的profile-info视图中的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)

任何帮助将不胜感激!

myzjeezk

myzjeezk1#

Netlify的一些优化过程可能会删除editUserInfo =,因为它会被分配给一个全局变量,因为它缺少var/let/const
尝试将其更改为const editUserInfo = ...,看看是否有帮助。

5uzkadbs

5uzkadbs2#

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

bbuxkriu

bbuxkriu3#

对于在Netlify中构建时遇到ReferenceError: location is not defined问题的任何人,最终都会出现这个SO问题:
仔细检查build命令是否在本地计算机上正确运行:npm run build或类似。运行npm run dev时,我遇到了一个不可见的问题,但当我尝试npm run build时,我得到了与Netlify相同的错误。

相关问题