Question

这是我的第一个反应应用程序，我正在使用创建反应应用程序创建音乐播放器，我想将我的状态“Albums.js”作为详细信息组件中的道具传递（例如，对于 src 和图像），所以它可以根据 Album.js 更改封面图片和歌曲，但它给了我错误（类型错误：无法读取 undefined 的属性 'img' ）这是代码：

App.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;

相册.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'
 }
];

Answer 1

您错误地提取了 Details 组件内的道具。

尝试提取如下：-

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>
  );
}

Answer 2

在 details.js 中，您不需要将 props 输入括在大括号中。

试试这个：

const Details=(props)=>{
 return(
 etc...

将状态作为道具传递给组件时出错

2 个答案: