reactjs - 从文件系统播放音频文件的列在排序或分页时不会改变

Question

我是 React 的新手，我正在尝试创建一个简单的反应表 - 带有音频文件播放的记录列表。有关记录的元数据来自数据库，音频文件根据文件系统中的 file_address 列加载。在排序和分页过程中，所有表列都会发生变化，但播放列一般不会发生变化。我附上了我的代码。预先感谢您的帮助 ：）

import React from 'react';
import ReactTable from 'react-table'
import 'react-table/react-table.css'
import './App.css';
import { Container } from "@material-ui/core";
import { maxHeight } from '@material-ui/system';



class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoaded: false,
      error: null,
      items: []
    };
  }
/**
 * call BE endpoint to receive records data
 */
  componentDidMount() {
    fetch("/records")
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result.Records
          });
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

  /**play wav audio */
  async play(file_address) {
    var audio = new Audio({file_address});  
    audio.type = 'audio/wav';

    try {
      await audio.play();
      console.log('Playing...');
    } catch (err) {
      console.log('Failed to play...' + err);
    }
  }

  /**create table structure */
  render(){
    const items = this.state.items;
    const columns = [{
      Header: 'ID',
      accessor: 'Id',
      sortable: true 
    }, 
    {
      Header: 'Name',
      accessor: 'Name',
      sortable: true
    },
    {
     id: 'Play',
     Header: 'Play',
     accessor: a => <audio controls>
     <source src={a.File_Address} type="audio/wav" />
     </audio>
    },
    {
      Header: 'Duration',
      accessor: 'Duration',
      sortable: true
    },
    {
      Header: 'Date',
      accessor: 'Date',
      sortable: true
    }, 
    {
      Header: 'Time',
      accessor: 'Time',
      sortable: true
    },{
      Header: 'File address',
      accessor: 'File_Address'
    }
  ]

  /**return react components with records data */
    return (
      <Container className="container" maxWidth="xl" style={{ height: maxHeight, background: '#ffffff', color: '#424242'}}>
        <h1 className="title">Records</h1>
        <ReactTable
        style={{
          background: '#eeeeee',
          color: '#000000'
        }}
        data={items}
        columns={columns}
        />
    </Container>
    )
  }
}

export default App;

标签： reactjsreact-reduxfrontendreloadreact-table