如何從軌道獲取json數據來反應js？

我曾嘗試使用ajax調用來從軌道獲取數據作出反應，但狀態沒有更新。當我試圖調用狀態時，它給了我一個未定義的錯誤。我在堆棧溢出中提到了其他問題，但無法解決我的問題。這是我的阿賈克斯請求。如何從軌道獲取json數據來反應js？

fetchData: function(){ 
     $.ajax({ 
     url: '/orders', 
     dataType: 'json', 
     type: 'GET', 
     success: function(result) { 
      this.setState({orders: result}); 
     }.bind(this), 
     error: function(xhr, status, err) { 
      console.error(this.props.url, status, err.toString()); 
     }.bind(this) 
     }); 
    }

Click this link to view the error

<p><button onClick={this.fetchData}>Filter</button></p> 
      <div> 
       { 
       Object.keys(this.state.orders).map(function(key){ 
        return <div key={ key }>{this.state.orders[key]}</div> 
       }, this) 
       } 
      </div>

來源

2016-12-26 Mathew

請提供一些更多的細節你的反應組件和錯誤，你得到 – WitVault

未定義的錯誤可能意味着空或不正確的json返回 –

錯誤說，你想呈現的東西，是一個對象，這是不可能的。這個問題可以在這裏找到：

return <div key={ key }>{this.state.orders[key]}</div>

如果你想渲染這一點，那麼this.state.orders[key]應該是一個JSX元素或值（例如字符串），它似乎並不如此。我不知道你分配給orders和this.setState({orders: result});是什麼。如果您向我們顯示result的值，我們可能會提供更多幫助，但現在問題在於this.state.orders[key]是一個對象。

來源

2016-12-26 14:09:41

您試圖將訂單對象呈現爲字符串。 React不喜歡那樣。嘗試僅僅渲染的值，而不是整個order對象，例如像這樣：

class Example extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { orders: { 
 
     first: { id: 311, name: 'Eric' }, 
 
     second: { id: 420, name: 'Andre' }, 
 
    }}; 
 
    } 
 
    render() { 
 
    return(
 
     <div> 
 
     { 
 
     Object.keys(this.state.orders).map(function(key){ 
 
      return <div key={ key }>{this.state.orders[key].id}</div> 
 
     }, this) 
 
     } 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<Example />, document.getElementById('View'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id='View'></div>

來源

2016-12-26 14:10:59

如何從軌道獲取json數據來反應js？

回答

相關問題