在 reactjs 中没有调用 componentDidMount答案

【问题标题】：The componentDidMount is not getting called in reactjs在 reactjs 中没有调用 componentDidMount
【发布时间】：2016-08-28 18:34:17
【问题描述】：

我正在尝试 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 开发者工具的“网络”控制台中，我没有看到对我的 json 文件的调用。当我在程序中添加日志时，我看到首先调用 getInitialState()，然后渲染，然后显示错误“Uncaught TypeError: Cannot read property 'data' of null”。

【问题讨论】：

您想要的 JSON 无效。你的键需要是字符串"content":
您可能会在控制台中收到有关它的错误。
@azium，我在控制台中没有收到任何错误。你说的方法也试过了。事情还是一样。
您的代码有效.. 这是一个小提琴jsfiddle.net/69z2wepo/40792 您实际上是在控制台中遇到错误，或者您的问题中遗漏了一些东西。您应该将初始状态设置为 data: { content: [] } 虽然
您以精确方式编写的代码将在控制台Cannot read property 'map' of undefined 中引发错误，因为data 在页面加载时不包含content 数组。

标签： json facebook reactjs

【解决方案1】：

我认为您的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) {
  ...
}

componentDidMount() 总是在第一次渲染之后调用（而不是在后续渲染中）

【讨论】：

感谢您的回复@wintvelt。尝试了你的建议。它仍然没有调用 componentDidMount()。现在它说，“无法读取 null 的属性‘数据’”。
是的，对不起，我的错误。更新了我的答案。
继续您的建议。有效。我将 props.data 设为空。代码是： if (this.props.data != "'') { var commentNodes = this.props.data.content.map(function(comment) { ..... } }