Question

我已尝试使用ajax调用从rails获取数据以作出反应，但状态未更新。当我试图呼叫状态时，它给我一个错误，它是未定义的。我已经在堆栈溢出中提到了其他问题，但无法解决我的问题。这是我的ajax请求。

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>

Answer 1

您正尝试将订单对象呈现为字符串。 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>

Answer 2

错误说你正在尝试渲染一个对象，这是不可能的。问题可以在这里找到：

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

如果要渲染它，那么this.state.orders[key]应该是JSX元素或值（例如字符串），并且似乎不是这种情况。我不知道您使用orders为this.setState({orders: result});分配了什么。如果您向我们展示result的价值，我们可能会提供更多帮助，但现在问题是this.state.orders[key]是一个对象。

如何从rails获取json数据以响应js？

2 个答案: