错误：无法解析 React App 中的 \'./components/Upload\' 和 \'./components/Results\'

Question

我正在为 Amazon AWS S3 构建一个反应应用程序前端，但我无法从“组件”文件夹中导入“上传”和“结果”组件。 “Upload.js”和“Results.js”文件位于“src/components”文件夹中，但是当我尝试运行“npm start”时，出现错误“找不到模块：错误：无法解析” ./components/Upload' 在 'C:\Users\luisj\Desktop\awsapp\awsapp\src\components'”。如何在我的 App.js 文件中正确导入这些组件？

**

应用程序.js**

import React, { useState } from 'react';
import Upload from './components/Upload';
import Results from './components/Results';

function App() {
const [results] = useState([]);

const handleUpload = (files) => {
// call the lambda function to send the files to Amazon Rekognition
// and update the results state with the returned data
}

const handleDownload = () => {
// handle the download of the results CSV file
}

return (
<div className="App">
<Upload onUpload={handleUpload} />
<Results results={results} onDownload={handleDownload} />
</div>
);
}

export default App;

**

结果.js**

import React, { Component } from 'react';


class Results extends Component {
    constructor(props) {
        super(props);

        this.state = {
            results: []
        };
    }

    updateResults(newResults) {
        this.setState({
            results: newResults
        });
    }

    renderResults() {
        if (this.state.results.length === 0) {
            return <p>No results yet.</p>;
        } else {
            return (
                <table>
                    <thead>
                        <tr>
                            <th>Image</th>
                            <th>Label</th>
                            <th>Confidence</th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.state.results.map((result, index) => (
                            <tr key={index}>
                                <td>{result.image}</td>
                                <td>{result.label}</td>
                                <td>{result.confidence}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            );
        }
    }

    render() {
        return (
            <div>
                <h2>Results</h2>
                {this.renderResults()}
            </div>
        );
    }
}

export default Results;

**

上传.js**

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { v4 as uuidv4 } from 'uuid';
import { S3 } from 'aws-sdk';

import { setUploadedImages } from './actions';

const Upload = () => {
  const [files, setFiles] = useState([]);
  const dispatch = useDispatch();

  const handleFileChange = (event) => {
    setFiles(event.target.files);
  };

  const handleUpload = async () => {
    // Initialize S3 client with your credentials
    const s3 = new S3({
      accessKeyId: process.env.REACT_APP_AWS_ACCESS_KEY_ID,
      secretAccessKey: process.env.REACT_APP_AWS_SECRET_ACCESS_KEY,
    });

    // Create an array to store the S3 object keys for the uploaded files
    const uploadedImages = [];

    // Loop through the selected files
    for (let i = 0; i < files.length; i++) {
      const file = files[i];

      // Generate a unique key for the S3 object
      const key = `${uuidv4()}-${file.name}`;

      // Upload the file to the S3 bucket
      await s3
        .upload({
          Bucket: process.env.REACT_APP_AWS_BUCKET_NAME,
          Key: key,
          Body: file,
        })
        .promise();

      // Add the S3 object key to the array
      uploadedImages.push(key);
    }

    // Dispatch the action to set the uploaded images in the store
    dispatch(setUploadedImages(uploadedImages));
  };

  return (
    <div>
      <input type="file" multiple onChange={handleFileChange} />
      <button onClick={handleUpload}>Upload</button>
    </div>
  );
};

export default Upload;

我正在尝试为 amazon aws s3 创建一个 react-app 前端，用户可以在其中将多个图像作为输入一次上传到 s3 存储桶。我为上传组件 (Upload.js) 创建了一个文件，为结果组件 (Results.js) 创建了另一个文件，并将它们导入到我的 App.js 文件中。但是，当我运行“npm start”时，出现以下错误：

./src/components/App.js 6:0-41 中的错误 找不到模块：错误：无法解析“C:\Users\luisj\Desktop\awsapp\awsapp\src\components”中的“./components/Upload”

./src/components/App.js 7:0-43 中的错误 找不到模块：错误：无法在“C:\Users\luisj\Desktop\awsapp\awsapp\src\components”中解析“./components/Results”

我仔细检查了文件是否位于正确的目录 (src/components) 中，并尝试使用不同的变体导入它们，例如“./Upload”和“./Results”，但仍然出现相同的错误。我希望 App.js 文件能够识别导入的组件并让应用程序成功运行。

Answer 1

您有一个简单的导入路径定义问题。

尝试将您的 App.js 文件移动到 src/ 的根目录，所以它是src/App.js

问题是您引用的是./components/Uploads.js。 ./ 定义类型定义了从当前目录开始的路径路由。所以，当你从 App.js 引用它时，它是其他两个的兄弟，程序试图找到 src/components/components/Upload.js，当然那个路由不存在，对吧？

所以，你可以做两件事。您可以将 App.js 文件向上移动一层，或者您可以将导入定义修改为：

import Upload from './Upload';

这应该会让您的应用程序再次运行。