नमस्ते, मैं Reactjs के लिए नया हूँ और मैं एक संगीत वेबसाइट के एक प्रोजेक्ट पर अभ्यास कर रहा हूँ। लेकिन एक मुद्दा है जिसके साथ मैं फंस गया हूं। वैसे एक गाना पेज है जहां मुझे कुछ गाने के कार्ड दिखाने चाहिए।

import React from 'react'
import SongCard from '../components/SongCard';
import { songsList } from '../components/songsList';

//this is first object of the songsList file which i hard coded instead of using api:

export const songsList =[
{
    id : 1,
    url : './components/Player/Songs/Homayoun Shajarian - Souvashoun.mp3',
    image : require('../assets/Souvashoun.jfif').default,
    name : 'x',
    singer : 'y',
    style :'z',
    lyrics :'v',
    source : './Palyer/Songs/Homayoun Shajarian - Souvashoun.mp3'


}];

export default function Songs() {
    return(
        <div>
        <SongCard className='col-md-6' id={songsList[0].id} image={songsList[0].image} name={songsList[0].name} singer={songsList[0].singer}/><br/>
        <SongCard className='col-md-6' id={songsList[1].id} image={songsList[1].image} name={songsList[1].name} singer={songsList[1].singer}/><br/>
        <SongCard className='col-md-6' id={songsList[2].id} image={songsList[2].image} name={songsList[2].name} singer={songsList[2].singer}/><br/>
        </div>
        );
}

और सॉन्गकार्ड में जिसे मैं नीचे कोड संलग्न करूंगा, एक बटन है जो हमें एक डाउनलोड म्यूजिक पेज पर रूट करने के लिए है ताकि उस विशिष्ट गीत को डाउनलोड किया जा सके जिसका बटन क्लिक किया गया था:

import React from 'react'
import {Card, Button} from 'react-bootstrap';
import styled from 'styled-components';
import {BrowserRouter as Router} from 'react-router-dom';

function SongCard(props){ 
    const id = this.props.id;
    this.props.history.push({
     pathname: '/downloadMusic',
    search: '?query=downloadMusic',
    state: { data: id }
    })

    return(
        
    <Styles>
    <Router>
    <Card style={{ width: '18rem'}} className="cardbg shadow" text="white">
      <Card.Img variant="top" src={props.image} className="img-fluid" />
      <Card.Body className="text-center">
        <Card.Title>آهنگ {props.name}</Card.Title>
        <Card.Text>خواننده {props.singer}
        </Card.Text>
        
        
        <Button  href="/DownloadMusic/:id" className="btn btn-outline-dark">go to download page</Button>
        
           
      </Card.Body>
    </Card> 
    </Router>
    </Styles>
    
);
}
export default SongCard;

और अंत में यह आखिरी पेज है जो डाउनलोड म्यूजिक है। यहां भी एक कार्ड होना चाहिए जिसमें विशिष्ट गीत और अंतिम डाउनलोड बटन के बारे में जानकारी हो।

import React from 'react';
import { songsList } from './songsList';
import DownloadCard from './DownloadCard';
import AudioPlayer from './Player/AudioPlayer';

function DownloadMusic() {
    const id = this.props.location.state.data;
     const song = songsList.find(item => item.id === id);

    return(
        <div>
        <DownloadCard className='col-md-6' id= {song.id} image={song.image} name={song.name} singer={song.singer}/><br/>
        <AudioPlayer/>

        </div>
        );
}

export default DownloadMusic;

मैं जो चाहता हूं वह उस विशिष्ट गीत की आईडी और यूआरएल भेजना है जिसे गीत पृष्ठ में क्लिक किया गया था, संगीत पृष्ठ डाउनलोड करने और कार्ड में गाने सूची से इसकी जानकारी दिखाने के लिए। मैंने राज्य का उपयोग करने जैसे कई तरीकों की कोशिश की है, पैराम्स (), ... इसके अलावा, मैं पूरे प्रॉप्स को नहीं भेजना चाहता क्योंकि मुझे पता है कि यह सबसे अच्छा अभ्यास नहीं है। तो मैं क्या गलत हूं?

आशा है कि मैंने पर्याप्त जानकारी साझा की है। किसी भी मदद की सराहना की जाती है।

1
Parastoo 10 जुलाई 2021, 18:09

3 जवाब

सबसे बढ़िया उत्तर

ठीक है, मुझे लंबे प्रयास के बाद आखिरकार ऐसा करने का एक तरीका मिल गया! अगर किसी को जरूरत हो तो मैं इसे यहां साझा कर रहा हूं।

तो SongCard.js में मैंने आईडी को बचाने के लिए useHistory() और एक नेविगेट फ़ंक्शन का उपयोग किया और उपयोग किए गए नेविगेट फ़ंक्शन के ऑनक्लिक विशेषता में भी डाउनलोड संगीत पृष्ठ पर नेविगेट किया:

import React from 'react'
import {Card, Button} from 'react-bootstrap';
import styled from 'styled-components';
import {BrowserRouter as Router, useHistory} from 'react-router-dom';



function SongCard(props){ 
    //navigating and saving id
    const history = useHistory()

    const navigate = (id) => {
        history.push(`/downloadMusic/${id}`)
    }

    return(
        
    <Styles>
    <Router>
    <Card style={{ width: '18rem'}} className="cardbg shadow" text="white">
      <Card.Img variant="top" src={props.image} className="img-fluid" />
      <Card.Body className="text-center">
        <Card.Title>آهنگ {props.name}</Card.Title>
        <Card.Text>خواننده {props.singer}
        </Card.Text>
        
        //make sure you add onClick attribute!
        <Button  onClick={() => navigate(props.id)} className="btn btn-outline-dark">download</Button>

      </Card.Body>
    </Card> 
    </Router>
    </Styles>
    
);
}
export default SongCard;

फिर DownloadMusic.js में useRouteMatch() का उपयोग करके मैंने आईडी परम का उपयोग किया, यह आईडी स्ट्रिंग थी इसलिए मैंने इसे अगले चरण में संख्या में बदल दिया। अंत में .find() विधि का उपयोग करके मुझे वह विशिष्ट गीत मिला जिसके लिए क्लिक किया गया था!

import React from 'react';
import { songsList } from './songsList';
import DownloadCard from './DownloadCard';
import AudioPlayer from './Player/AudioPlayer';
import { useRouteMatch } from "react-router-dom";


function DownloadMusic() {
    //getting id param
     const {
    params: { id },
  } = useRouteMatch('/downloadMusic/:id');
//converting the string id to number:
const num = Number(id);
//finding the song with song.id= num
 const song = songsList.find(item => item.id === num);



    return(
        <div>
    <DownloadCard className='col-md-6' 
        id= {song.id} 
        url= {song.url} 
        image={song.image} 
        name={song.name} 
        singer={song.singer}
        /><br/>
        <AudioPlayer id = {song.id}/>

        </div>
        );
}

export default DownloadMusic;

बस आईडी के प्रकार के बारे में सावधान रहें, यह नंबर होना चाहिए। इस छोटे से मुझे बहुत समय लगा। :) सौभाग्य!

0
Parastoo 11 जुलाई 2021, 12:02

आपको क्या करना है गाने की सरणी को मैप करना है, इस तरह

import React from 'react'
import React from 'react'
import SongCard from '../components/SongCard';
import { songsList } from '../components/songsList';

//this is first object of the songsList file which i hard coded instead of using api:

const songsList =[
{
    id : 1,
    url : './components/Player/Songs/Homayoun Shajarian - Souvashoun.mp3',
    image : require('../assets/Souvashoun.jfif').default,
    name : 'x',
    singer : 'y',
    style :'z',
    lyrics :'v',
    source : './Palyer/Songs/Homayoun Shajarian - Souvashoun.mp3'


}];

export default function Songs() {


    
    return(
    
        <div>
        {
           songsList.map((song, idx) => {

           return     <SongCard key={idx} className='col-md-6' id={song.id} image={song.image} name={song.name} singer={song.singer}/>
            })
        
        }    
        </div>
        
        );
}
0
Fernando Ramirez 10 जुलाई 2021, 15:24

आप गाना कार्ड पेज में इस तरह का एक फंक्शन बना सकते हैं

 const onSongCardClick = () => {
        history.push({
            pathname: '/downloadMusic',
              state: {id: this.props.id, url: this.props.url} 
          })
    }
...
...
<Button onclick="onSongCardClick()" className="btn btn-outline-dark">go to download page</Button>

और उन मूल्यों को डाउनलोड संगीत पृष्ठ में प्राप्त करें

 const { id, url } = this.props.location.state

गाने पेज से गाने के कार्ड के लिए प्रॉप्स के रूप में यूआरएल भी पास करें

0
santhosh srinivasan 12 जुलाई 2021, 02:15