如何从轨道获取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？

回答

相关问题