JS/Reactでネストされた関数に外部からアクセスするには？

Question

スコープ機能に問題があります。私は "item"の値を取得しようとしていますが、関数の外部でアクセスしようとすると定義されません。どうすれば "アイテム"を外部からアクセスできるようにすることができますか？レンダリングでアイテムを使用できるようにする必要があります。

onLinkClicked() { 

    var parent = this.state.username 
     //console.log(this.state.username) 
    var conn = new jsforce.Connection({ 
     serverUrl: 'https://cs63.salesforce.com', 
     accessToken: sessionStorage.getItem('token') 
    }) 
    conn.query("SELECT Id, Name, Phone FROM Contact WHERE LastName='" + parent + "'", 
     function(err, result) { 
      if (err) { 
       return console.error(err); 
      } 

      var a = result 
       a.records.forEach(function(item) { 
       result = (item.Name + ' ' + item.Phone); 

       console.log(item) // I'm trying to get the value of item, which outputs correctly here 

      }); 

     } 
    ) 

    console.log(item) //Here I get undefined due to being out of scope, how can I access item?. 

    } 

render() { 

return (
    <div className='menubox' id='menubox'> 
    <div className='searchbar-container'> 
    <form onSubmit={e => e.preventDefault()}> 
     <input 
     type='text' 
     size='25' 
     placeholder='Contact Last Name' 
     onChange={this.handleChange.bind(this)} 
     value={this.state.username} /> 
     <button 
     type='submit' 
     onClick={this.onLinkClicked.bind(this)}> 
     Search 
     </button> 
    </form> 
    </div> 
    <div dangerouslySetInnerHTML={ { __html: item } }> 
    </div> 
    </div> 

) 
} 

Answer 1

結果を格納するグローバル変数を定義します。反応を使用している場合（使用している反応クラスは完全には表示されていません）、this.setStateを使用して状態を設定し、別の場所で使用してください。 conn.queryは非同期であるため、conn.queryメソッドの後にitemを使用することはできません。あなたがコールバックでそれを行う処理をしたい場合。

レンダリング機能でitemが必要であると仮定しました。状態でこれは容易に可能です。

functionの定義をラムダ式（() => {}）に変更しました。これは、コールバック内でthisを使用するために必要です。

...() { 
    // ... 
    conn.query("SELECT Id, Name, Phone FROM Contact WHERE LastName='" + parent + "'", 
      (err, result) => { 
      if (err) { 
       return console.error(err); 
      } 

      var a = result; 
      a.records.forEach((item) => { 
       result = (item.Name + ' ' + item.Phone); 
       this.setState({item : item}); 
      }); 

      }; 
     ); 

    // You will never be able to get item here, because you are using an 
    // asynchronous function. If you want to use item further in this 
    // function you have to use it within the callback of conn.query. 
    console.log(item); 
}; 

render() { 
    // Nevertheless you can use this.state.item here. I assume this is 
    // what you want. 
    return (// ... 
); 
}