时间戳

首页 > 解决方案 > 选择的反应元素总是相同的

reactjs - 选择的反应元素总是相同的

问题描述

import React from 'react'
import { useState, useEffect } from 'react'
import axios from 'axios'

const Home = () => {

let [songs, setSongs] = useState([])

let x = document.getElementById('audioFile')

useEffect(() => {
    // sample songs
    setSongs([
        {
            id: 1,
            title: 'Song 1',
            genre: 'Instrumental'
        },
        {
            id: 2,
            title: 'Song 2',
            genre: 'Western'
        }
    ])
}, [])

const playSong = (e) => {
    if(x){
        x.play()
        console.log(x) // in order to see which element is being clicked
    } else {
        x = document.getElementById('audioFile')
    }
}

return (
<>
    {
    songs.map(song =>
        (
            <div className='music-controller' key={song.id}>
                <h2>{song.title}</h2>
                <p><small>{song.genre}</small></p>
                    <div className="controls">
                       <button onClick={playSong}>Play</button>
                   <audio id='audioFile'>
                       <source src={`http://localhost:8000/api/songs/audio/${song.id}`} /> // this remains the same when clicked
                   </audio>
            </div>
        ))}
</>
)
}

export default Home

所以，我映射歌曲并通过他们的 id 给他们唯一的 url，但由于某种原因，当我点击第二首歌曲时，它是 src/currentSrc/innerHTML = http://localhost:8000/api/songs/audio/ 1 这是第一首歌曲的 src ，所以无论你点击哪首歌曲都会播放第一首歌曲，我该如何解决这个问题？

标签： reactjs

解决方案

所以我们可以id给audiotag 设置 unique ，然后通过 this 找到它id。不完全是 React 风格，但可以这样做：

import React from "react";
import { useState, useEffect } from "react";

const Home = () => {
  let [songs, setSongs] = useState([]);

  useEffect(() => {
    setSongs([
      {
        id: 1,
        title: "Song 1",
        genre: "Instrumental",
      },
      {
        id: 2,
        title: "Song 2",
        genre: "Western",
      },
    ]);
  }, []);

  const playSong = (id) => {
    console.log(id);
    const x = document.getElementById(id);
    console.log(`x`, x);
    x.play();
  };

  return (
    <>
      {songs.map(({ id, title, genre }) => (
        <div className="music-controller" key={id}>
          <h2>{title}</h2>
          <p>
            <small>{genre}</small>
          </p>
          <div className="controls">
            <button onClick={() => playSong(id)}>Play</button>
            <audio id={id}>
              <source src={`http://localhost:8000/api/songs/audio/${id}`} />
            </audio>
          </div>
        </div>
      ))}
    </>
  );
};

export default Home;

推荐阅读