Question

我正在使用reactjs教程https://facebook.github.io/react/docs/tutorial.html中的示例来读取服务器（文件）中的json。但是，我的“componentDidMount”没有被调用。

以下是代码：

var CommentBox = React.createClass({
  loadCommentsFromServer: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this),
        cache: false
    });
  },
  getInitialState: function() {
    return {data: {}};
  },
  componentDidMount: function() {
    this.loadCommentsFromServer();
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />         
      </div>
    );
  }
}); 

var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.data.content.map(function(comment) {

      return (
        <Comment pageName={comment.xyz} key={comment.id}>
          {comment.abc}
        </Comment>
      );
    });
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});

var Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
        <h2 className="commentpageName">
          {this.props.pageName}
        </h2>
        <p> {this.props.children} </p>        
      </div>
    );
  }
});
    ReactDOM.render(<CommentBox url="/api/comments" />, document.getElementById('content'));

请检查我初始化数据的方式（数据：{}）

当json属于以下类型时，将调用“componentDidMount”（就像教程中的方式一样）：

[       {"id": "1", "xyz": "xyz1", "abc": "abc1"},
        {"id": "2", "xyz": "xyz2", "abc": "abc2"}   ]

但我想要的json格式是：

{
    content: [
    {"id": "1", "xyz": "xyz1", "abc": "abc1"},
    {"id": "2", "xyz": "xyz2", "abc": "abc2"},
    {"id": "3", "xyz": "xyz3", "abc": "abc3"}],
    "totalPages":3,
    "totalElements":10,
    "last":true
}

让我知道在什么条件下不会调用componentDidMount。请帮忙。

在Chrome开发者工具的“Networks”控制台中，我没有看到对我的json文件的调用。当我在程序中添加日志时，我看到首先调用getInitialState（）然后渲染，然后显示错误“Uncaught TypeError：无法读取属性'数据'的null”。

Answer 1

我认为您的namespace :integrations do namespace 'stripe' do %w(auth webhook activate).each do |action| get action, action: action end end post 'stripe/deactivate', controller: 'stripe', action: 'deactivate' end未被调用，因为componentDidMount()内的渲染代码在首次渲染时不起作用，因为数据为空，<CommentList>可能不存在，因此您的渲染失败。

你应该做的是改变这个：

this.props.data.content

对此：

var commentNodes = this.props.data.content.map(function(comment) {

var commentNodes = []; if (this.props.data.content) { commentNodes = this.props.data.content.map(function(comment) { ... }始终在第一次渲染后调用（而不是在后续渲染中）

在reactjs中没有调用componentDidMount

1 个答案: