Reactjsとajaxを使用したリアルタイム検索のURLからのデータへのアクセス

Question

私はjavascriptを初めて使用しています。私はリアルタイム検索アプリケーションを使用して検索結果を取得しています。 jsonpを使用してサーバー制約を回避するために、ajaxを使用してURLからデータを取得しています。私はsearchForTerm関数でconsole.logの結果を得ることはできますが、レンダリング関数ではできませんが、変数に正しくバインドできません。だから私は画面上で望む結果を得ることができません。

私jsfiddle

をここで確認してください私のコードです：

// var test = {}; 
// var json = {"F": {"symbol": "F", "name": "Ford Motor", "bidPrice": 13.43, "askPrice": 13.52}}; 
// test.data = [json]; 
// If i use the above variable and feed them to data during initialization, 
// then it works. But when i get the same data from server i am not able to 
// get the same update on my screen. 


var SearchStock = React.createClass({ 

    getInitialState: function() { 
     return {searchString: '', data: [], quantity: ''}; 
    }, 

    componentWillMount: function() { 
     // Get the initial terms 
     this.doSearch(); 
    }, 

    componentWillUnmount: function() { 
     this.serverRequest.abort(); 
    }, 

    doSearch: function(term) { 
     this.serverRequest = this.searchForTerm(term || '').then(this.handleSearchResult); 
    }, 

    searchForTerm: function (term) { 
    var url = 'http://data.benzinga.com/rest/richquoteDelayed?symbols=' + term; 
    return $.ajax({ 
     url, 
     dataType: 'jsonp', 
     success: function (data) { 
      console.log("in search", JSON.stringify(data)); 
      this.setState({data: [JSON.stringify(data)]}); 
      }.bind(this) 
     }); 
    }, 

    handleSearchResult: function(quote) { 
     this.setState(quote); 
    }, 

    handleChange: function(e) { 
     this.setState({searchString: e.target.value}); 

     // The server doesn't seem to respond to lowercase values 
     this.doSearch(e.target.value.toUpperCase()); 
    }, 

    buy: function(e){ 
     if(!term.quantity){ 
      term.quantity = e; 
     } else { 
      term.quantity = term.quantity + e; 
     } 
     return term.quantity; 
    }, 

    sell: function(e){ 
     term.quantity = term.quantity - e; 
     return term.quantity; 
    }, 

    viewStock: function(e){ 
     searchForTerm(e); 
    }, 

    render: function() { 
     var stocks = this.state.data; 
     console.log("in render", stocks); 

     var searchString = this.state.searchString.trim().toLowerCase(); 

     if (searchString.length > 0) { 
      stocks = stocks.filter(function(l) { 
       // return l.name.toLowerCase().match(searchString); 
       return l[Object.keys(l)[0]]["symbol"].toLowerCase().match(searchString); 
      }); 
     } 

     return (
      <div> 
       <div id='searchResult'> 
        <input type="text" value={this.state.searchString} onChange={this.handleChange} placeholder="Type here" /> 
        <ul> 
         {stocks.map(function(l) { 
          return <div> 
           <h3>{l[Object.keys(l)[0]]["name"]}</h3> 
           <table class="table table-striped table-bordered"> 
            <tr> 
             <th>Bid</th> 
             <th>Ask</th> 
            </tr> 
            <tr> 
             <td>{l[Object.keys(l)[0]]["bidPrice"]}</td> 
             <td>{l[Object.keys(l)[0]]["askPrice"]}</td> 
            </tr> 
           </table> 
          </div> 
         })} 
        </ul> 
        <input type="text" value={this.state.quantity} placeholder="Quantity" /> 
        <input type="button" value="Buy" onClick={this.buy} /> 
        <input type="button" value="Sell" onClick={this.sell} /> 
       </div> 
       <div id='currentPorfolio'> 
        <h5>Current Portfolio</h5> 
        <h5>$100,000 This needs a disabled text box with value comming from a variable with initial value as $100000</h5> 
        <table class="table table-striped table-bordered"> 
         <tr> 
          <th>Company</th> 
          <th>Quantity</th> 
          <th>Price Paid</th> 
          <th></th> 
         </tr> 
         {stocks.map(function(l) { 
          return <tr> 
           <td>{l[Object.keys(l)[0]]["name"]}</td> 
           <td>{l[Object.keys(l)[0]]["quantity"]}</td> 
           <td>{l[Object.keys(l)[0]]["bidPrice"]}</td> 
           <td>{<input type="button" value="View Stock"/>}</td> 
          </tr> 
         })} 
        </table> 
       </div> 
      </div> 
     ); 
    } 
}); 

ReactDOM.render(<SearchStock />, document.getElementById('container')); 

私は、これは、変数のスコープ、それらが更新されている方法に関連しなければならないと感じ。しかし、コンソールのログで結果を見ることができますが、画面には表示されないので、誰かが私を助けてくれたら分かります。

私はこの後もデバウンスに取り組まなければなりません。今は変更がない場合でもリクエストをサーバーに送信しています。テキストボックスに変更があった場合にのみ呼び出すためにhandleChangeを使用するより良い方法はありますか？

私はここで何かを逃している場合は謝罪、私はかなりjavascriptに新しいと反応しています。そして、私はいつもjavascriptがスコープを扱う方法と混同してきました。

Answer 1

私は反応でonChangeの代わりにonBlurを使用して解決できました。ここでは、私が参照し、私たちがjavascriptのonchange（）の違いを理解するのに役立ち、onChange（）プロパティと反応のonBlur（）がjavascriptのonchange（）とどのように反応するかを説明します。

How to "onchange" in ReactJS

私は、これは2つの機能の間で混乱していた誰かに役立ちます願っています。

Answer 2

ここにいくつかの問題があります。最初は、thisがjQueryのajax()メソッド内のReactコンポーネントを参照していない可能性があります（URLが機能しないためわかりません）。

これは、jQueryコードの外からsetStateへの参照を提供します。

searchForTerm: function (term) { 
    const setState = state => this.setState(state); 
    var url = 'http://data.benzinga.com/rest/richquoteDelayed?symbols=' + term; 
    return $.ajax({ 
    url, 
    dataType: 'jsonp', 
    success: function (data) {// your code here 
     console.log("in search", JSON.stringify(data)); 
     setState({data: [JSON.stringify(data)]}); 
     }.bind(this) 
    }); 
}, 

これが解決しない場合、私はコンソールに表示されている全てのエラーを修正、または（例えば）それらの原因となるすべてのコードを削除することをお勧め。あなたが期待どおりに動作しないものの単純な例があれば、他の人が助けてくれる方が簡単になります。

もう1つの問題は、変数が定義されている関数にスコープが設定されていることです。したがって、buy()およびsell()では、termは未定義です。