В настоящее время я разрабатываю приложение, в котором будет указан ряд продуктов. Когда пользователь выбирает продукт, он будет go для продукта. 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;
SequenceImages. 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;
Product. 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;