質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

6314閲覧

Reactコンポーネント外からSetState()を実行したい

shori0128

総合スコア29

Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2017/11/11 14:23

###前提・実現したいこと
electron + Reactで開発を行っています。
プログラミングに関しては初級者レベルのため、説明不足な部分や、意味が伝わらない部分があるかもしれませんが、お許しください。

electronのipcイベントで取得した引数をReactコンポーネントにSetState()して、画面に表示したいのですが、エラーが発生してしまい、解決方法がわかりません。

###発生している問題・エラーメッセージ
DeveloperToolに表示されたエラー

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the DrawImage component.

###該当のソースコード

"use stict"; const { remote } = require('electron'); const { Menu, MenuItem, dialog } = remote; const ipc = require('electron').ipcRenderer; ipc.on('fileOpen', function (event, array) { const drawImage = new DrawImage(); drawImage.setState({ image: array }); }); const ImageList = function (props) { return ( props.image.map(function (path, index) { <img key={index} src={path}></img> }) ); } class DrawImage extends React.Component { constructor(props) { super(props); this.state = { image: [] }; } render() { return ( <div> <ImageList image={this.state.image} /> </div> ); } } ReactDOM.render( <DrawImage />, document.getElementById('image') );

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

const drawImage = new DrawImage();

この部分で生成しているインスタンスは、

ReactDOM.render( <DrawImage />, document.getElementById('image') );

ここで描画しているコンポーネントとは何の関係もありません。
上記のJSXは、

ReactDOM.render( React.createElement(DrawImage, null), document.getElementById('image') );

このようにコンパイルされることがわかるとイメージし易いでしょうか。

エラーメッセージにある通り、newで生成したインスタンスに対してsetStateしても、それはマウントされないのでこのようになるのだと思います。

コンポーネントに外側からsetStateしたければ、refを使って

let drawImage; ReactDOM.render( <DrawImage ref={(c) => drawImage = c}/>, document.getElementById('image') );

とした上で、

ipc.on('fileOpen', function (event, array) { if (drawImage) { drawImage.setState({ image: array }); } });

のようにすれば、おそらくうまくいくのではないかと思います。

投稿2017/11/11 14:51

__tai2__

総合スコア70

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shori0128

2017/11/11 16:40

>__tai2__様 早速のご回答ありがとうございます。 いただいた内容で実行してみてうまくいきました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問