Question

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

// 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)
    )
  }
});

Answer 1

您应该实施render()方法。

与此类似的东西应该有效：

render: function() {
 return (
  <div>
    {this.state.users.map(function(user){
       return <h2>{user}</h2>
     })}
  </div>
 );
}

Answer 2

试试这个

<TreeView ItemsSource="{Binding Nodes}"/>

来自组件中的ajax的提取数据未在React

2 个答案: