tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:React開発でJSforceの実行結果をState変数にセットする方法

ReactのState変数に値をセットするときは『setState』を使います。

this.setState({ user : res });


JSforceからSalesforceAPIを実行して結果をセットしたいときは次のように書けばいいのかなと試してみました。

conn.identity(function(err, res) {
  if (err) {
    alert(err);
  } else {
    this.setState({ user : res });
  }
});


これで実行したところCannot read propertyエラーが発生しました。

Uncaught TypeError: Cannot read property 'setState' of undefined

f:id:tyoshikawa1106:20160728194107p:plain


Salesforce APIを実行するときは非同期処理になるので、この書き方だとエラーになるみたいです。非同期処理のやり方を検索してみたところ次のように書けばいいみたいです。

conn.identity(function(err, res) {
      if (err) {
        alert(err);
      } else {
        this.setState({ user : res });
      }
    }.bind(this));

f:id:tyoshikawa1106:20160728194458p:plain


これでログインユーザの情報を取得してState変数にセットすることができました。
f:id:tyoshikawa1106:20160728194550p:plain


おまけ

State変数の値を画面に表示するときは次のように書きます。

<div>{this.state.user.last_name}</div>


こういう書き方もできるのかなと次のやり方を試してみました。

<div>{'Hello World!! ' + this.state.user.last_name + ' ' + this.state.user.first_name + '!!'}</div>


上の書き方だとstate変数に値がセットされるまでの一瞬に「undefined」と表示されてしまいました。きちんと次のように書いた方が良さそうです。

<div>Hello {this.state.user.last_name} {this.state.user.first_name}!!</div>

f:id:tyoshikawa1106:20160728195613p:plain