来自组件中的ajax的提取数据未在React中呈现 [英] Fetched data from ajax in component is not rendering in React

问题描述

关注此。我创建了一个组件，并尝试使用ajax请求获取数据。我已经编写了用于呈现它的代码，但它不起作用，并且在页面加载后也没有错误。我是新来的反应，所以没有多少想法，可能这就是无法检查问题的原因。任何帮助都会很棒。

Following this. I have created a component and from that trying to fetch data using ajax request. I have written code for rendering it but it's not working and also no error after page load. I am new to react so not much idea, probably that's why unable to inspect the issue. Any help will be great.

// Js
React.createElement('tbody', {}, UserItem)

// Component
var UserItem = React.createClass({
propTypes: {
  name: React.PropTypes.string.isRequired,
  email: React.PropTypes.string,
  dob: React.PropTypes.string,
},

getInitialState: function() {
  return {
    users: []
  }
},

showResults: function(response) {
  this.setState({
    users: response
  })
},

search: function(URL) {
  $.ajax({
    type: "GET",
    dataType: 'json',
    url: URL,
    success: function(response){
      this.showResults(response);
    }.bind(this)
  });
},

componentDidMount: function() {
  this.search("users/usersData");
},

render: function() {
  return (
    UserItems
  )
},
})

var UserItems = React.createClass({
  render: function() {
    var resultItems = this.state.users.map(function(result) {
      return React.createElement(ResultItem, {id:result.id, name:result.name});
    });

    return React.createElement('div', {}, resultItems);
  },
})

var ResultItem = React.createClass({
  render: function(){
    return React.createElement('tr', {}, 
      React.createElement('td', {}, this.props.id),
      React.createElement('td', {}, this.props.name),
      React.createElement('td', {}, this.props.name),
      React.createElement('td', {}, this.props.name)
    )
  }
});

推荐答案

试试这个

search: function(URL) {
  var self = this;
  $.ajax({
    type: "GET",
    dataType: 'json',
    url: URL,
    success: function(response){
      self.showResults(response);
    }.bind(this)
  });
}

这篇关于来自组件中的ajax的提取数据未在React中呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！