导入反应组件的问题

Question

我有一个问题，我更改了组件的文件夹配置并更改了导入路径，现在我得到 Module not found: Can't resolve '../App' in C: 不管，即使我的文件路径是正确的。

import Header from "./Components/MiscComponents/Header";
import Users from "./Components/UsersDisplay/Users";
import User from "./Components/UsersDisplay/User";
import Login from "./Components/MiscComponents/Login";
import EditOrCreateUser from "./Components/CreateEditUser/EditOrCreateUser";

/App 位于与 Components 文件夹相同的 src 文件夹中。什么可能导致这个问题。在我移动文件并更改导入路径之前，它运行良好。

./src/Components/CreateEditUser/EditOrCreateUser.jsx 未找到模块：无法解析“C:\Users\Veljko\Desktop\React\users-challenge\src\Components\CreateEditUser”中的“../App”

是完整的错误，这是我的文件夹结构的快照

这是 EditOrCreateUser 组件

import React from "react";
import { PropContext } from "../App";
import { useState, useContext } from "react";
import { Redirect } from "react-router-dom";
import TextField from "@material-ui/core/TextField";
import { Button, Box } from "@material-ui/core";

function EditOrCreateUser(props) {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [redirect, setRedirect] = useState(false);
  const { data, editOrCreate } = useContext(PropContext);
  const user = data.find((e) => props.match.params.id == e.id);
  const emailIsValid = () =>
    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
      email
    );

  const editUser = () => {
    if (emailIsValid() && name) {
      fetch("https://jsonplaceholder.typicode.com/users", {
        method: "PATCH",
        body: JSON.stringify({
          name: name,
          email: email,
        }),
        headers: {
          "Content-type": "application/json; charset=UTF-8",
        },
      }).then((response) => {
        if (response.ok) setRedirect(true);
        else alert(`request failed ${response.status}`);
      });
    } else alert("Name required or invalid email");
  };

  const createUser = () => {
    if (emailIsValid() && name) {
      fetch("https://jsonplaceholder.typicode.com/users", {
        method: "POST",
        body: JSON.stringify({
          name: name,
          email: email,
        }),
        headers: {
          "Content-type": "application/json; charset=UTF-8",
        },
      }).then((response) => {
        if (response.ok) setRedirect(true);
        else alert(`request failed ${response.status}`);
      });
    } else alert("Name required or invalid email");
  };

  return redirect ? (
    <Redirect to="/users" />
  ) : (
    <Box
      display="flex"
      flexDirection="column"
      alignItems="center"
      style={{ marginTop: "10px" }}
    >
      <TextField
        style={{ margin: "2px" }}
        variant="outlined"
        color="secondary"
        value={name}
        onChange={(e) => setName(e.target.value)}
        type="text"
        required
      />
      <TextField
        style={{ margin: "2px" }}
        variant="outlined"
        color="secondary"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        type="email"
        required
      />
      {editOrCreate ? (
        <Button
          style={{ margin: "2px" }}
          variant="contained"
          color="secondary"
          onClick={() => editUser()}
        >
          Edit
        </Button>
      ) : (
        <Button
          style={{ margin: "2px" }}
          variant="contained"
          color="secondary"
          onClick={() => createUser()}
        >
          Create
        </Button>
      )}
    </Box>
  );
}

export default EditOrCreateUser;

Answer 1

这是错误： import { PropContext } from "../App";

首先，我认为您没有从 App.js 文件夹中导出任何内容。即使您从那里导出了某些内容，也应该将其导入为：

import { PropContext } from '../../App'

Answer 2

组件在您的文件夹中创建为 Jsx 文件。 尝试使用-

 import Header from "./Components/MiscComponents/Header.jsx";
 import Users from "./Components/UsersDisplay/Users.jsx";
 import User from "./Components/UsersDisplay/User.jsx";
 import Login from "./Components/MiscComponents/Login.jsx";
 import EditOrCreateUser from "./Components/CreateEditUser/EditOrCreateUser.jsx";

只有 'js' 文件会自动导入而无需提及。 我认为这应该可行。