ReactJS не обновляет состояние

Question

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

  componentDidMount() {
    var id = window.location.href.split('/')[3]
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://reactAppBackend/edit/" + id);
    xhr.send();
    xhr.onloadend = () => {
      this.setState({singlePost: JSON.parse(xhr.responseText)})
      console.log(this.state.singlePost[0])
    };
  }

, когда я запускаю этот консольный журнал, возвращаются данные, эти данные

{_id: "5e6016adb8c32b00883f55f5", postTitle: "RE4", postContent: "the best ", __v: 0}

, но когда я пытаюсь отобразить состояние:

  render() {
    return (
      <div>{this.state.singlePost[0]}</div>
    )
  }

ничего не рендерит.

Answer 1

У вас есть опечатка здесь: <div>{this.state.siglePost[0]}</div>

siglePost, должен быть singlePost

Answer 2

Состояние было массивом, мне удалось показать ответ с помощью функции карты.

  render() {
    return (
      <div>
        {this.state.singlePost.map(post => {
          return (
            <div>
              <p>{post.postTitle}</p>
              <p>{post.postContent}</p>
              <img src={post.postPicturePath} />
            </div>
          );
        })}
      </div>
    );
  }

Answer 3

Внутри вашего рендера есть опечатка. Это должен быть один пост

render() {
    return (
      <div>{this.state.singlePost[0]}</div>
    )
  }