2
Helloooo！Reactコンポーネントでオーディオ要素のsrc属性が変更され、ウィンドウがLinux上でリロードされると、電子が空になる
私のLinuxミントx64でReactと一緒に使用しているElectronのこの奇妙な問題に直面しています。 コンポーネントにはオーディオ要素があります。私はscr属性をstream_urlという小道具で埋めます。すべての罰金、トラックが読み込まれ、音楽が再生されます。私は別のトラックに変更しました。
しかし、ページがリロードされたとき（デフォルトのメニュー項目のリロードだけになる）、メインウィンドウは空白になります。私はdevtoolsを通じてDOMの要素を見ることができ、コンソールにエラーはありません。また、私はウィンドウのサイズを変更すると、私はアプリケーションの背景を見ることができますが、他には何もありません。
私は何かをクリアする必要があります..しかし、私は何を見つける。
また、私はmain.js
process.on('uncaughtException', function (err) {
console.log(err);
})
に登録したが例外が
私の最初の考えはレンダラープロセスはので、私はが
メインプロセスでイベントをクラッシュして登録crachedたということです起こりませんmainWin.webContents.on('crashed', event => {
console.log('crashed');
})
ただし、コンソールに何も表示されません。
私はテストnodejsサーバーでクラッシュログを送信するためにcrashReportedモジュールをメイン処理にcrashReporter.start({
productName: 'name',
companyName: 'company',
submitURL: 'http://127.0.0.1:3001/submit',
uploadToServer: true
});
を追加しますが、何もPOSTされていない。また..同じ結果と
をhttps://github.com/justinmc/react-audio-playerを試してみました
。
あなたの助けが必要な:)
をここでは、親コンポーネントのコード
は、Windows 10のx64では
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>
)
}
}
- をレンダリングしています問題は、GPU合成を無効にすることで、回避することができ何ら問題