我有一个在后端创建新文件的函数，但是<PlaySound />组件一直播放旧的声音文件，而不是更新的声音文件。声音文件有相同的名称/路径，只是内容不同。
我试着用row.text作为键，这样当文件的描述更新时，它会强制组件更新。我还试着生成一个GUID作为url的种子，并使用no-cache头，但似乎没有什么工作...

<PlaySound key={ row.text } path={ row.location.path } filename={ row.location.filename } />

这是PlaySound组件

import React, { Component } from 'react';
    
import { genUID } from '../../../helpers/helperFunctions';
    
class PlaySound extends Component
    {
        playSound(path, filename) {
            var endpoint = "http://0.0.0.0:8001/api/stream"
            var url = endpoint + "?path=" + path + "&filename=" + filename + "&seed=" + genUID()
            var audio = new Audio(url);
            console.log(audio);
            audio.load();
            audio.play();        
        }
    
        render() 
        {
            return (
                <div>
                    <span onClick={() => this.playSound(this.props.path, this.props.filename)}>&#9658;</span>
                </div>
            );
        }
    }
    
export default PlaySound

这是我的nodejs/express流实现。

app.get(API_VERSION + '/stream', (req, res) =>
{
  const filepath = req.query.path;
  const filename = req.query.filename;

  const file = '/app/audioExport/' + filepath + filename;

  try
  {
    res.writeHead(200, {
      'Cache-Control': 'no-cache, no-store, must-revalidate',
      'Pragma': 'no-cache',
      'Content-Type': 'audio/wav',
    });
    const rstream = fs.createReadStream(file);
    rstream.pipe(res);
  } catch (error) {
    res.json({error: error})
  }
});