javascript - React组件继承和ajax调用

Question

我很难理解为什么这不起作用

var link = window.location.href;
var array = link.split('/');
var sub = array[array.length-1];
console.log(sub);
var name;
var posts;
var upvotes;

var ProfileFiller = React.createClass({

   getUser : function() {

   $.ajax({
            url: '/profile/' + sub,
            dataType: 'json',
            success: function(data) {
               this.setState({user:data});
               name = data.local.email;

            }.bind(this),
        error: function(xhr, status, err) {
                console.log("error");
               console.error(this.props.url,status, err.toString());
            }.bind(this)
        });

   },

   getInitialState: function() {
       return {
          user: []

       }
    },


  componentDidMount: function() {
    this.getUser();
    },

  render : function() {
  return(
  <div>
  <hr/>
  <List user = {this.state.user} />
  </div>
  )

  }
});


var List = React.createClass({

  render : function() {
    console.log(this.props.user);
  return (
  <h1>{this.props.user.name}</h1> 
  )
  }
});


React.render(<ProfileFiller  />,
document.getElementById('profileView'));

我多次记录它，并且 List 类中的数组最初是空的，然后它再次返回填充元素。我认为 ajax 调用需要一些时间来提取数据，这就是它不起作用的原因，但它很可能与渲染及其工作方式有关，但是如果我设置一个全局变量“名称”并将其分配给发生 ajax 调用的 users 子字段并将其传递为 <h1>{name}</h1>而不是<h1>{this.props.user.name}</h1>它最终工作了。

我知道 react 方式是传递 Prop 而不是设置变量，并且对此感到有点困扰。

这也是 ajax 的服务器端:

app.get('/profile/:user', function(req, res) {
    var id = req.params.user;
    User.findById(id, function(err, user) {
        res.json(user);
    });
 });

编辑: 一些解决方案？: 我能够通过将 user 设置为 data.local 来传递它，似乎在使用 props 时，当你向下传递 json 的两个级别时，它不起作用，我不知道为什么。所以对我来说 this.props.user.email 与 this.props.user.local.email 比较有效。所以我只是将用户设置为 data.local 而不仅仅是数据。

另一个问题: 我还有另一个问题，有时我的数组会变空，这可能是因为 ajax 调用可能需要一段时间。我该如何解决这样的问题，我会说类似

if ajaxcall is complete/if success is complete 
   then pass down our filled array

但我认为我们的 ajax 成功调用中的 setstate 可以解决这个问题。嗯... 或者有更好的解决方法吗？

Answer 1

修复方法如下:

render : function() {
    console.log(this.props.user);
  return (
  <div><h1>{this.props.user.name}</h1></div>
  )
  }

React 会查找渲染中的所有内容，并用 Div 标签包裹起来，之后用户可以按照自己的意愿进行嵌套。您还可以在渲染下方编写 var userName = this.props.user.name; ，然后在 h1 标记中调用 {userName} 。其次，由于某种原因，过去的 Prop 不能打印超过 1 级深度。我不知道这是“我型”问题还是 react 问题。

例如，它不会找到 this.props.user.name.firstName，直到 this.props.user.name。