為什么我的 React 代碼在導入我的功能組件時會拋出未定義的錯誤？

Question

我目前正在開發一個應用程序，其中將列出許多產品。 當用戶選擇產品時，他們會將 go 轉到 Product.js，其中將呈現與該產品相關的一系列圖像。 但是，目前我在嘗試為每個產品提取正確的圖像列表 (ImageSequence.js) 時收到錯誤消息。

我對 React 還很陌生，所以如果有人可以幫助我解決這個問題，我將不勝感激。

我收到的錯誤如下：

Error: Cannot find module './undefined/undefined0.jpg'

ProductData.js

const ProductData = [
  {
    id: 1,
    name: 'Product 1',
    slug: 'product-1',
    explore_tech_img_folder: 'product_1_explore_technologies',
    explore_tech_filename: 'product_1_explore_technologies',
    user_interface_img_folder: 'product_1_user_interface',
    user_interface_filename: 'product_1_user_interface',
    categories: ['Atomic Spectroscopy', 'Cell Cultures'],
    waterTypes: ['Type 1'],
    feedTypes: ['Mains'],
  },
  {
    id: 2,
    name: 'Product 2',
    slug: 'product-2',
    explore_tech_img_folder: 'product_2_explore_technologies',
    explore_tech_filename: 'product_2_explore_technologies',
    user_interface_img_folder: 'product_2_user_interface',
    user_interface_filename: 'product_2_user_interface',
    categories: ['Atomic Spectroscopy', 'DNA/RNA Work'],
    waterTypes: ['Type 1'],
    feedTypes: ['Mains'],
  },
];

export default ProductData

Products.js

import React, {useContext} from "react";
import { Link } from "react-router-dom";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons';
import ProductData from "./data/ProductData";
import { ChoicesContext } from "../context/ChoicesProvider";
import { ReactComponent as Logo } from '../images/logo.svg';
import { ReactComponent as WaterTechLogo } from '../images/water-tech-logo.svg';

const Products = () => {
  const { choices } = useContext(ChoicesContext);
  const ProductsResult = ProductData.filter(x => x.categories.includes(choices.category) && x.waterTypes.includes(choices.waterType) && x.feedTypes.includes(choices.feedType));

  return (
    <>
      <Link to="/">
        <Logo className="Logo" />
      </Link>
      <WaterTechLogo className="WaterTechLogo" />

      <div className="pageLinks">
        <div className="breadcrumb">Applications > {choices.category} > {choices.waterType} > {choices.feedType}</div>
        <div className="backBtn"></div>
      </div>

      <div className="products wrapper d-md-flex">

        <aside>
          <div className="wrapper">
            <h2 className="text-center text-md-left">Select a<br />Product</h2>
            <div className="scrollArrows">
              <FontAwesomeIcon icon={faArrowLeft} />
              <FontAwesomeIcon icon={faArrowRight} />
            </div>
          </div>
        </aside>

        <main>
          <div id="productResults">
            {ProductsResult.map((item, i) => (
              <div key={i} className="product">
                <Link
                  to={{
                    pathname: '/products/' + item.slug,
                    name: item.name,
                  }}
                >
                <img src="https://via.placeholder.com/400x250" alt="" />
                <div className="description">
                  <h4>{item.name}</h4>
                  <p>Key Features:</p>
                  <ul className="features">
                    {item.keyFeatures.map((item, i) => (
                      <li key={i}>{item}</li>
                    ))}
                  </ul>
                  <p class="select"><FontAwesomeIcon icon={faArrowRight} /> Select</p>
                </div>
                </Link>
              </div>
            ))}
          </div>
        </main>
      </div>
    </>
  );
};

export default Products;

序列圖像.js

import React, {useContext} from "react";
import ProductData from "./data/ProductData";
import { ChoicesContext } from "../context/ChoicesProvider";

const SequenceImages = () => {
  const { choices } = useContext(ChoicesContext);
  const ProductSelected = ProductData.filter(x => x.name === choices.category);

  let images = [];
  for (let i = 0; i < 51; i++) {
    images.push(<img src={require(`../images/sequences/${ProductSelected.explore_tech_img_folder}/${ProductSelected.explore_tech_filename}${i}.jpg`)} alt="" className="sequenceImage" />);
  }
  return images;
};

export default SequenceImages;

產品.js

import React from "react";
import { Link } from "react-router-dom";
import '../App.scss';
import { ReactComponent as Logo } from '../images/logo.svg';
import { ReactComponent as WaterTechLogo } from '../images/water-tech-logo.svg';
import SequenceImages from './SequenceImages';

class Product extends React.Component {

  constructor(props) {
    super(props);

    this.forwardSequence = this.forwardSequence.bind(this);
    this.reverseSequence = this.reverseSequence.bind(this);
  }

  async sleep(ms) {
    return new Promise(r => setTimeout(r, ms))
  }

  async forwardSequence(sequence, effect) {
    Array.prototype.reduce.call
      ( sequence
      , (r, img) => r.then(_ => this.sleep(50)).then(_ => effect(img))
      , Promise.resolve()
      )
  }

  async reverseSequence(sequence, effect) {
    Array.prototype.reduceRight.call
      ( sequence
      , (r, img) => r.then(_ => this.sleep(50)).then(_ => effect(img))
      , Promise.resolve()
      )
  }

  render() {
    const seq = document.getElementsByClassName("sequenceImage");

    return (
      <>
        <Link to="/">
          <Logo className="Logo" />
        </Link>
        <WaterTechLogo className="WaterTechLogo" />

        <div className="product wrapper d-md-flex">
          <aside>
            <h1>Product</h1>
          </aside>

          <main>
            <div className="imageSequence">
              <img src={require(`../images/sequences/static.jpg`)} alt="" className="staticImage" />
              <SequenceImages />
            </div>
            <p>xxx</p>
            <button onClick={() => this.forwardSequence(seq, img => img.style.opacity = 1)}>Forward Animation</button>
            <button onClick={() => this.reverseSequence(seq, img => img.style.opacity = 0)}>Reverse Animation</button>
          </main>
        </div>
      </>
    );
  }
}

export default Product;

Answer 1

如果你寫下你得到的錯誤，我會更容易回答這個問題。 謝謝

Answer 2

const ProductSelected = ProductData.filter(x => x.name === choices.category);

ProductSelected是一個數組。

然后，您嘗試在此行中訪問該數組中的屬性： images.push(<img src={require(``../images/sequences/${ProductSelected.explore_tech_img_folder}/${ProductSelected.explore_tech_filename}${i}.jpg``)} alt="" className="sequenceImage" />);

Answer 3

我不是 100% 確定要求可以像您在以下方面所做的那樣動態完成：

images.push(<img 
src={require(``../images/sequences/${ProductSelected.explore_tech_img_folder}/${ProductSelected.explore_tech_filename}${i}.jpg``)} 
alt="" className="sequenceImage" />)

您可能需要預先要求您的文件並將它們放入 object 並循環播放。

const images = require("../images/sequences"); 

然后通過以下方式訪問它們：

const image = images[myComponentName];

Webpack 和一般 React 不能很好地處理動態導入。 這是因為需要和導入在運行時解決，但到那時獲取所需內容可能為時已晚。

並且文件圖像/序列應該只導出帶有路徑名的 object。 這可能是動態生成的。 現在您正在訪問不使用導入/導出規則的東西。

或者

只是嘗試擺脫 src 屬性的 require 部分？

src={`../images/sequences/${ProductSelected.explore_tech_img_folder}/${ProductSelected.explore_tech_filename}${i}.jpg`

祝你好運，黑客攻擊愉快。