编译失败：找不到模块：无法在 ReactJS 中解析

Question

我正要汇总这个 activity，但我开始收到这个错误：

找不到模块：无法解析 ./src/pages/index.js 中的“./components/Post”

我已尽我所能，但无法解决此问题。以下是我的代码列表：

index.js


    import React, { useState, useEffect } from 'react';
    import Posts from './components/Pagination';
    import Pagination from './components/Post';
    import axios from 'axios';
    
    const Home = () => {
      const [posts, setPosts] = useState([]);
      const [loading, setLoading] = useState(false);
      const [currentPage, setCurrentPage] = useState(1);
      const [postsPerPage] = useState(10);
    
      useEffect(() => {
        const fetchPosts = async () => {
          setLoading(true);
          const res = await axios.get('https://jsonplaceholder.typicode.com/posts');
          setPosts(res.data);
          setLoading(false);
        };
    
        fetchPosts();
      }, []);
      // Get current posts
      const indexOfLastPost = currentPage * postsPerPage;
      const indexOfFirstPost = indexOfLastPost - postsPerPage;
      const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost);
    
      // Change page
      const paginate = pageNumber => setCurrentPage(pageNumber);
      return (
        <div
          style={{
            display: 'flex',
            height: '90vh'
          }}
        >
          <img src={require('../images/top_img.jpg')} alt='logo' height='500px' width='100%'/>
          <div className='container mt-5'>
          <h1 className='text-primary mb-3'>LATEST NEWS</h1>
          <Posts posts={currentPosts} loading={loading} />
          <Pagination
            postsPerPage={postsPerPage}
            totalPosts={posts.length}
            paginate={paginate}
          />
        </div>
        </div>
    
      );
    };
    
    export default Home;

Post.js


    import React from 'react';
    
    const Posts = ({ posts, loading }) => {
      if (loading) {
        return <h2>Loading...</h2>;
      }
    
      return (
        <ul className='list-group mb-4'>
          {posts.map(post => (
            <li key={post.id} className='list-group-item'>
              {post.title}
            </li>
          ))}
        </ul>
      );
    };
    
    export default Posts;

Pagination.js


    import React from 'react';
    
    const Posts = ({ posts, loading }) => {
      if (loading) {
        return <h2>Loading...</h2>;
      }
    
      return (
        <ul className='list-group mb-4'>
          {posts.map(post => (
            <li key={post.id} className='list-group-item'>
              {post.title}
            </li>
          ))}
        </ul>
      );
    };
    
    export default Posts;

下面是我的代码结构：

Answer 1

不会是相对路径错误吗？

    import Posts from '../components/Pagination';
    import Pagination from './components/Post';

两个导入都在同一个文件中，两个文件都在同一个文件夹中，但是一个有 ../ 和另一个 ./

Answer 2

首先，你我会让命名的导入匹配文件结构：

import Post from "./components/Post"
import Pagination from "./components/Pagination"

此外，您的默认导出也搞砸了。您将要导出分页，然后在 ./Post 中要导出 Post.

最后，你的路径搞砸了。 “组件”文件夹与 index.js 处于同一级别。因此，您可以通过“./components”

访问它

Answer 3

我相信你的对象名称被调换了。

编译失败：找不到模块：无法在 ReactJS 中解析

Failed to compile: Module not found: Can't resolve in ReactJS

html

javascript

css

reference

reactjs