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调用需要一些时间来提取数据，这就是为什么它不起作用但它很可能与渲染及其工作方式有关，但是如果我设置一个全局变量“name”并将其分配给发生ajax调用的用户子字段并将其传递为 <h1>{name}</h1>而不是<h1>{this.props.user.name}</h1>它最终会起作用。

我知道反应方式是传递道具而不是设置变量，并且有点困扰。

这也是ajax的服务器端：

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

修改 一些解决方案？： 我能够通过将用户设置为data.local来传递它，看起来好像在使用道具时它没有工作当你走下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

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

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}。其次，过去的道具不能因某种原因打印超过1级的深度。我不知道这是“我型”问题还是反应问题。

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

React组件继承和ajax调用

1 个答案: