У меня возникли проблемы с отображением изображений в компоненте. Мне удалось получить все необходимые данные (цена, описание, название), но я не могу получить изображения. Процесс заключается в том, что когда пользователь нажимает на компонент, он открывает pdp этого конкретного товара.

Наверняка ошибка здесь:

Что нужно поставить вместо this.state.image ?

Заранее спасибо!

Моя структура кода:

App.js
   ├── Header.js
   ├── Home.js
   ├── shop.js
            ├── PictureCard.js
   ├── Pdp.js
   ├── About.js
   └── Footer.js

Мой код:

App.js

import React from "react"
import Header from "./components/Header"
import Main from "./components/Main"
import Footer from "./components/Footer"

import './App.css';

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      productId: "",
      productTitle: "",
      productPrice: "",
      productDescription: "",
      productImage: ""
    }
  }

  handleCallback = (id, name, price, description, image) => {
    this.setState({
      productId: id,
      productTitle: name,
      productPrice: price,
      productDescription: description,
      productImage: image
    })
  }

  render() {
    return (
      
) } } export default App

Main.js

import React from 'react'
import { Switch, Route } from 'react-router-dom'
        
import Home from './Home'
import Shop from './Shop'
import About from './About'
import Pdp from './Pdp'
        
    function Main({parentCallback, productDescription, productPrice, productImage}) {
        return (
             {/* The Switch decides which component to show based on the current URL.*/}
                 ()}/>
                 ()}/>
                 ()}/>
                 ()}/>
            
        )
    }
        
export default Main

Pdp.js

import React from "react"

import { Link } from "react-router-dom"

import './Pdp.css'

class Pdp extends React.Component {
     constructor(props) {
          super(props)
          this.state = {
               description: this.props.productDescription,
               price: this.props.productPrice,
               image: this.props.productImage
          }
     }
     
     render() {
          return (
               

All pictures {this.props.match.params.productTitle}

{this.props.match.params.productTitle}

€ {this.state.price}

{this.state.description}

) } } export default Pdp;

zawrdo

Ответов: 1

Ответы (1)

В App.js вы передаете prop компоненту main следующим образом:

productImage = {this.state.image}

Но в состоянии App и даже в setState вы используете productImage...

2022 WebDevInsider