###前提・実現したいこと
monaca+OnsenUI+Reactで検証作業を行なっています。
その作業の内、カメラ機能を検証しています。
###発生している問題・エラーメッセージ
Cordovaプラグインでカメラ起動は出来たのですが、
撮影したjpgファイルのデータをReactのstateへ更新するのに失敗します。
getPicture関数内でCordovaプラグインのnavigator.camera.getPictureを使用し、
指定した成功時のコールバック関数(関数名:onSuccess)は正常に呼び出されるのですが、
その関数内でthis.setStateがなぜか認識されていないのが原因です。
エラーメッセージ
monacaのデバッガのApp Logだと、
'Error in Scucess callbasckId:Camera62XXXXXXX: '
###該当のソースコード
言語はReact.js ファイルはJsx
ここにご自身が実行したソースコードを書いてください
TestPage.jsx
/////////////////////////////////////////////
import React from 'react';
import ReactDOM from 'react-dom';
import {Toolbar, Page, Button} from 'react-onsenui';
export default class TestPage extends React.Component {
constructor(props) {
console.log("constructor");
super(props);
this.state = {
photoData: 'hoge.png' ,
}
}
onSuccess(imageData) {
console.log("onSuccess start-----");
// ※ 下のsetStateが認識されず、エラーになります。
this.setState({
photoData: 'data:image/jpeg;base64,' + imageData,
});
console.log("onSuccess end-----3");
}
onFail(message) {
alert("onFail");
}
// カメラ起動関数 成功時はonSuccess、失敗時はonFailが呼び出される。
getPicture() {
navigator.camera.getPicture(this.onSuccess, this.onFail, {
quality : 50,
destinationType: Camera.DestinationType.DATA_URI,
targetWidth: 100,
targetHeight: 100
});
}
render() {
return (
<Page>
<p style={{textAlign: 'center'}}>
<img src={this.state.photoData} style={{width: '70%'}} />
</p>
<p style={{textAlign: 'center'}}>
<i className="fa fa-camera fa-3x" aria-hidden="true" onClick={this.getPicture.bind(this)}></i>
</p>
</Page>
);
}
}
###試したこと
ログ出力を追加し、setState自体が認識されていないことを確認。
setState自体は正常に動くことを、別途ボタンで検証済み
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/08/10 09:08
2017/08/10 09:16