Ini adalah aplikasi reaksi pertama saya Saya membuat pemutar Musik menggunakan aplikasi Buat reaksi, saya ingin meneruskan status saya "Albums.js" sebagai alat peraga di Komponen Detail (Seperti, untuk src dan gambar), sehingga dapat mengubahnya gambar sampul dan lagu menurut Album.js , tetapi itu memberi saya kesalahan (Kesalahan Jenis: Tidak dapat membaca properti 'img' dari undefined ) di sini adalah kodenya:

Aplikasi.js

import React from 'react';
import Details from '../Components/Details'
import {Albums} from '../Albums';
import './App.css'
import 'tachyons';

 
class App extends React. Component{
constructor(){
  super()
  this. State={
    Albums: Albums
  }
}



  render(){
    return(
      <div className='tc center'>
        <div className=' tc bg-light-green  dib br3 pa3 ma2  shadow-5'>
          <h4>Now Playing </h4>
          <Details src={Albums[0].src} img={Albums[0].cover}/>
         <p>Next : <span>Next song Name</span></p>
        </div>
      </div>
      );

  }
}



export default App;

Details.js

import React from 'react';
import { BsSkipBackwardFill } from "react-icons/bs";
import { BsPlayFill } from "react-icons/bs";
import { BsSkipForwardFill } from "react-icons/bs"; 



const Details=({props})=>{
   return(
       <div className='Detailss'>
       <img className='img-src' alt='pic' src={`${props.img}`}/>
       <h3>Song name</h3>
       <h5>Artist Name</h5>
       <button className='prev-btn'> 
       <BsSkipBackwardFill size="3rem"/>   
       </button>
       <button className='pause-btn'> 
       <BsPlayFill size="3rem"/>
       </button>
       <button className='next-btn'> 
       <BsSkipForwardFill size="3rem"/>
       </button>
        <audio className='controls' src={props.src} controls></audio>
       </div>
       );
} 


export default Details;

Album.js

export const Albums = [
 {
   cover: 'perfect-img.jpg',
   Songname: 'Leanne Graham',
   Artistame: 'Bret',
   src: './Songs/Ed-Sheeran-Perfect.mp3'
 },
 {
   cover: 10,
   Songname: 'Clementina DuBuque',
   Artistame: 'Moriah.Stanton',
   src: 'Rey.Padberg@karina.biz'
 },
   {
   cover: 1,
   Songname: 'Leanne Graham',
   Artistame: 'Bret',
   src: 'Sincere@april.biz'
 },
   {
   cover: 1,
   Songname: 'Leanne Graham',
   Artistame: 'Bret',
   src: 'Sincere@april.biz'
 }
];

0
Ayush Singh 12 Mei 2021, 13:07

2 jawaban

Jawaban Terbaik

Anda salah mengekstrak properti di dalam komponen Details.

Coba ekstrak seperti di bawah ini: -

const Details=({img, src})=>{
  return (
    <div className="Detailss">
      <img className="img-src" alt="pic" src={`${img}`} />
      <h3>Song name</h3>
      <h5>Artist Name</h5>
      <button className="prev-btn">
        <BsSkipBackwardFill size="3rem" />
      </button>
      <button className="pause-btn">
        <BsPlayFill size="3rem" />
      </button>
      <button className="next-btn">
        <BsSkipForwardFill size="3rem" />
      </button>
      <audio className="controls" src={src} controls />
    </div>
  );
} 
1
Priyank Kachhela 12 Mei 2021, 10:12

Di details.js Anda tidak perlu membungkus input props dalam kurung kurawal.

Cobalah seperti ini:

const Details=(props)=>{
 return(
 etc...
1
Dandelion 12 Mei 2021, 10:20