React автоматически меняет первую букву свойства на верхний регистр только тогда, когда работает

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становится комментарием. Идет, как и все остальные атрибуты моего объекта, и он не может получить какое-либо свойство.У меня действительно нет выбора, я уже сменил модель на строчные, но проблема сохраняется.Я уже изменил объявление свойств в моем режиме, изменил свой контроллер и даже файл jsx.

Answer 1

Добавьте эту строку this.loadCommentsFromServer = this.loadCommentsFromServer.bind(this) в ваш конструктор следующим образом:

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

Согласно официальному документу , они сказали:

Выдолжны быть осторожны со значением этого в обратных вызовах JSX.В JavaScript методы класса не связаны по умолчанию.Если вы забудете связать this.handleClick и передать его onClick, при вызове функции это значение будет неопределенным.

Это не специфичное для React поведение;это часть того, как функции работают в JavaScript.Обычно, если вы ссылаетесь на метод без () после него, такой как onClick = {this.handleClick}, вы должны связать этот метод.

Внутри метода loadCommentsFromServer() вы использовалиthis переменная для обновления состояния компонента.Следовательно, если вы не связываете его, значение this в момент вызова метода loadCommentsFromServer() не будет компонентом, это undefined.Следовательно, мы не можем обновить состояние компонента.

Answer 2

проверьте данные вашего ответа на получение в loadCommentsFromServer ()