React 구성 요소에서 오디오 요소 src 속성이 변경되고 Linux에서 창이 다시로드되면 전자가 비어 짐

Question

Helloooo!

필자는 Linux xint64에서 React와 함께 사용하는 Electron과 관련된 이상한 문제에 직면하고있다. 구성 요소에는 오디오 요소가 있습니다. stream_url이라는 소품으로 scr 속성을 채 웁니다. 모든 것은 괜찮습니다. 트랙이로드되고 음악이 재생됩니다. 나는 다른 선로와 그 ok로 바꿨다.

하지만 페이지가 다시로드되면 (기본 메뉴 항목을 다시로드하기 만하면) 주 창이 사라집니다. 콘솔에서 DOM을 통한 devtools 및 오류없이 요소를 볼 수 있습니다. 또한 창 크기를 조정할 때 내 응용 프로그램의 배경을 볼 수 있지만 다른 것은 없습니다 ..

이해할 수 있듯이 나는 어떤 것을 정리해야하지만 .. 나는 무엇을 찾을 수 없습니다. 그래서 나는 주요 공정

을에 이벤트를 추락 등록

또한 나는 main.js

process.on('uncaughtException', function (err) { 
console.log(err); 
}) 

에 등록하지만 예외는 내 첫번째 생각은 렌더러 프로세스가 crached 점이다

발생하지

mainWin.webContents.on('crashed', event => { 
console.log('crashed'); 
}) 

콘솔에는 아무 것도 인쇄되지 않습니다.

내가 같은 결과로 https://github.com/justinmc/react-audio-player 시도

..

또한

내가 테스트 서버를 nodejs에서 충돌 로그를 보내 주 프로세스에 crashReported 모듈

crashReporter.start({ 
productName: 'name', 
companyName: 'company', 
submitURL: 'http://127.0.0.1:3001/submit', 
uploadToServer: true 
}); 

를 추가하지만 아무것도 게시 된 없다 .

당신의 도움이 필요합니다 :) 여기

는

render() { 
    return (
     <div className="app-content"> 
     <Header /> 
     <Main track={this.state.active_track} /> 
     <AppPlayer track={this.state.active_track}/> 
     </div> 
    ) 
    } 

AppPlayer 구성 요소 창에서

import config from './config'; 
    import React from 'react'; 

    export default class AppPlayer extends React.Component { 
    constructor(props) { 
     super(props); 

     this.setAudioSrc = this.setAudioSrc.bind(this); 
     this.play = this.play.bind(this); 
     this.stop = this.stop.bind(this); 
    } 

    setAudioSrc() { 
     if (this.props.track && this.props.track.stream_url) { 
     return this.props.track.stream_url + "?client_id=" + 
     config.client_id 
     }; 
     return null; 
    } 

    play(e) { 
     e.preventDefault(); 

     let playPromise = this.audioEl.play(); 
     if (playPromise !== undefined) { 
     playPromise.then(() => {}).catch(function(error) { 
     throw new Error(error); 
     }); 
     } 
    } 

    componentWillUnmount() { 
     this.audioEl.pause(); 
    } 

    stop(e) { 
     if (e) { 
     e.preventDefault(); 
     } 
     this.audioEl.pause(); 
     this.audioEl.currentTime = 0; 
    } 

    render() { 
     return (
     <section className="current-track"> 
     <audio src={this.setAudioSrc()} ref={(audioEl) => { 
      this.audioEl = audioEl 
      }}/> 
     <div className="current-track__actions hide"> 
      <a href="#" onClick={this.play}> 
      <i className="fa fa-play"></i> 
      </a> 
      <a href="#" onClick={this.stop}> 
      <i className="fa fa-stop"></i> 
      </a> 
     </div> 
     </section> 
    ) 
    }  
    } 

• 10 64 렌더링 상위 구성 요소의 코드

  입니다 OS가 리눅스가

  app.commandLine.appendSwitch('disable-gpu-compositing');

  가 나를 위해 어떻게됩니까 명령을 실행하면 메인 과정에서

  : 아무 문제

Answer 1

문제는 GPU 합성을 비활성화하여, 피할 수에게이 없다 AMD GPU가 탑재 된 Linux Mint. 일렉트론에서 chrome : // gpu /를 열거 나 Chrome/Chromium에서 비교하여 GPU 합성이 활성화되었는지 쉽게 확인할 수 있습니다.

test ok.

yo!:)