Question

我正在尝试使用以下代码显示作者和评论的列表：

class CommentBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: [] };
  }
  loadCommentsFromServer() {
    const xhr = new XMLHttpRequest();
    xhr.open("get", this.props.url, true);
    xhr.onload = () => {
      const data = JSON.parse(xhr.responseText);
      this.setState({ data: data });
    };
    xhr.send();
  }
  componentDidMount() {
    this.loadCommentsFromServer();
    window.setInterval(
      () => this.loadCommentsFromServer(),
      this.props.pollInterval
    );
  }
  render() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
        <CommentForm />
      </div>
    );
  }
}

class CommentList extends React.Component {
  render() {
    const commentNodes = this.props.data.map(comment => (
      <Comment key={comment.id} author={comment.author}>
        {comment.text}
      </Comment>
    ));
    return (
      <div className="commentList" key={comment.id}>
        {commentNodes}
      </div>
    );
  }
}

class CommentForm extends React.Component {
  render() {
    return <div className="commentForm" />;
  }
}

class Comment extends React.Component {
  render() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">{this.props.author}</h2>
        {this.props.children}
      </div>
    );
  }
}

ReactDOM.render(
  <CommentBox url="/comments" pollInterval={2000} />,
  document.getElementById("content")
);

这是我的jsx文件，运行我的应用程序时出现问题，在浏览器中，我的comment.id变为comment.Id，因为该对象的所有其他属性都是他无法获得的。我真的没有选择，我已经将模型更改为小写，但是问题仍然存在。我已经在我的模式下更改了属性声明，更改了控制器，甚至更改了jsx文件。

Answer 1

检查在 loadCommentsFromServer（）

中收到的响应数据

Answer 2

将此行this.loadCommentsFromServer = this.loadCommentsFromServer.bind(this)添加到您的构造函数中，如下所示：

constructor(props) {
   super(props);
   this.state = { data: [] };
   this.loadCommentsFromServer = this.loadCommentsFromServer.bind(this)
}

根据Official React Document，他们说：

您必须小心JSX回调中的含义。在JavaScript中，默认情况下不绑定类方法。如果忘记绑定this.handleClick并将其传递给onClick，则在实际调用该函数时将无法定义。

这不是特定于React的行为；这是功能运作的一部分   使用JavaScript。通常，如果您引用的方法不带（）   之后，例如onClick = {this.handleClick}，则应将其绑定   方法。

在loadCommentsFromServer()方法中，您确实使用了this变量来更新组件状态。因此，如果不绑定它，则在调用this方法时loadCommentsFromServer()的值将不是undefined的组成部分。因此，我们无法更新组件状态。

只有在运行时，React才会自动将属性的首字母更改为大写

2 个答案: