小编the*_*oys的帖子

我正在尝试用React构建一个迷你的2轨音频播放器。音频由html音频元素集中控制，而html音频元素在子组件中具有曲目列表。（尚未样式化的）播放器可以在此处查看。

我可以在React开发工具中告诉您，单击单个音轨选择按钮确实会更新音频元素的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() { …

在下面的示例中，我需要在 fetch 方法中进行 fetchData 调用之前重置一些值。async await 在继续之前是否等待 reset 方法中的所有函数完成？

fetch = async () => {
  await this.reset();
  this.props.fetchData();
};

reset = () => {
  this.props.resetFilter();
  this.props.resetClient();
  this.props.resetUser();
};

或者您必须执行以下操作？

fetch = () => {
  this.reset().then(() => {
    this.props.fetchData();
  });
};

reset = async () => {
  await this.props.resetFilter();
  await this.props.resetClient();
  await this.props.resetUser();
};

谢谢 ：）