Javascript （React js）音频src正在setState上更新，但音频播放没有更改

我试图建立一个迷你2声道音频播放器与反应。音频由html音频元素集中控制，该元素在子组件中具有曲目列表。我们可以看到尚未被定格的玩家

我可以在React-dev工具中看出，在这里的一位成员的帮助下，单击单个曲目选择按钮确实会更新音频元素的src，但是，播放音频不会改变。我已经在下面发布了申请代码

甚至可以通过这种方式更新状态来更改播放音频吗？非常感谢您的帮助

var TRACKLIST = [
    {
        id: 1,
        name: "song a",
        source: "./audio/test.m4a"
    },
    {
        id: 2,
        name: "song b",
        source: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/wwy.mp3"
    }
]

function Track(props) {
    return (
        <div className="track">
            <div className="meta">
                <div className="name">
                    <h2>{props.name}</h2>
                </div>
                <audio>
                    <source src={props.source} />
                </audio>
            </div>
            <button className="select" onClick={function() {props.onChange(props.source);}} >
            </button>
        </div>
    )
}

var Application = React.createClass({

    getInitialState: function() {
        return {
            isPlaying: "./audio/test.m4a"
        };
    },

    onTrackChange: function(source) {
        this.setState({ isPlaying: source })
    },

    render: function() {
        return (
            <div className="player">
                <div className="tracklist">
                    {this.props.tracklist.map(function(track){
                        return <Track
                                    key={track.id}
                                    name={track.name}
                                    source={track.source}
                                    onChange={this.onTrackChange} />
                    }.bind(this))}
                </div>
                <div className="controls">
                    <audio controls>
                        <source src={this.state.isPlaying} />
                    </audio>
                </div>
            </div>
        )
    }
});

// Render the UI
ReactDOM.render(
    <Application tracklist={TRACKLIST} />,
    document.getElementById('Player')
);

---

由于存在缓存，所以不能像更改图像那样仅更改src来更改音频文件。您需要加载它并再次播放

onTrackChange: function(source) {
       this.setState({ isPlaying: source },function(){
            this.refs.audio.pause();
            this.refs.audio.load();
            this.refs.audio.play();
       })
}

回调处理状态更改后的暂停、加载和播放。记住在音频标签中添加一个ref

<audio controls ref="audio">
   <source src={this.state.isPlaying} />
</audio>

<audio controls ref={audioRef}>
    <source src={source} type='audio/mpeg' />
</audio>

使用挂钩

导入useRef并创建其实例

import React, { useRef } from 'react';
const audioRef = useRef()

功能更新歌曲

const updateSong = (source) => {
    setSource(source);
    if(audioRef.current){
        audioRef.current.pause();
        audioRef.current.load();
        audioRef.current.play();
    }
}

别忘了给音频标签添加ref

<audio controls ref="audio">
   <source src={this.state.isPlaying} />
</audio>

<audio controls ref={audioRef}>
    <source src={source} type='audio/mpeg' />
</audio>

---

如果您不介意取消播放状态和时间，则根据源代码在音频标记上设置不同的键属性是有效的。

您可以尝试onChange={this.onTrackChange.bindthis}吗？不幸的是，这不太可能，但还是要感谢您。在您的示例中，存在以下错误：未捕获错误：Bootstrap的JavaScript需要jQuery。你注意到了吗？我注意到了，但我不知道为什么会出现错误，因为我包含了JQuery。在我的另一个网站上也是一样，但它似乎无关紧要，因为JQuery仍然正常运行。我不认为这是问题的根本原因。它只是引导的一个依赖项。如果包含jquery，则应删除错误消息。很高兴能消除一些噪音。此外，是什么让您确信setState可以工作？没有关于如何从音频播放器调用该函数的参考。您可以在任何地方调用该函数按钮单击等。我为我创建了显示歌曲并单击播放的音乐卡组件。调用函数时只需传递歌曲的源代码即可。谢谢@Anurag Sharma这似乎是React 16的更好答案+