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

【问题标题】：Error While passing a state as a props to the Components将状态作为道具传递给组件时出错
【发布时间】：2021-05-12 10:07:00
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs

【解决方案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>
  );
}

【讨论】：

【解决方案2】：

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

试试这样：

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

【讨论】：