В чем произошла ошибка?

Question

[testkeyc]

Пытался подключиться к wordpress используя реакт и получить из него данные, но произошли ошибки TypeError: "this.state.title is undefined".
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

С чем они связана?

import React from 'react';
import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      title: {},
      date: "",
      content: {}
    };
  }


  componentDidMount() {
    return fetch(`http://mysite.loc/wp-json/wp/v2/posts/`)
      .then((response) => response.json())
      .then((responseJson) => {
        const { title, date, content } = responseJson;
        this.setState({ title, date, content });
      })
      .catch((error) => {
        console.error(error);
      });
  }

  render() {
    return (
      <div>
        <div>
          <div className="row">
            <div className="leftcolumn">
              <div className="card">
                <div className="title">
                  <h1>{this.state.title.rendered}</h1>
                  <p> {this.state.date} </p>
                </div>

                <div
                  className="content"
                  dangerouslySetInnerHTML={{ __html: this.state.content.rendered }} />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}


export default App;

Answer 1

[Narts]

Вы берете this.state.title до того, как данные пришли с сервера

Comments

[testkeyc]

как правильно нужно написать?

[Narts]

testkeyc, проверять, пустой ли стейт. Если да, то выводить какую-нибудь заглушку или лоадер

[testkeyc]

Narts, можете показать кодом? я не так давно работаю с реактом...

[Narts]

testkeyc,

import React from 'react';
import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      title: null,
      date: "",
      content: {}
    };
  }


  componentDidMount() {
    return fetch(`http://mysite.loc/wp-json/wp/v2/posts/`)
      .then((response) => response.json())
      .then((responseJson) => {
        const { title, date, content } = responseJson;
        this.setState({ title, date, content });
      })
      .catch((error) => {
        console.error(error);
      });
  }

  render() {
    return (
<>
{this.state.title ?
      <div>
        <div>
          <div className="row">
            <div className="leftcolumn">
              <div className="card">
                <div className="title">
                  <h1>{this.state.title.rendered}</h1>
                  <p> {this.state.date} </p>
                </div>

                <div
                  className="content"
                  dangerouslySetInnerHTML={{ __html: this.state.content.rendered }} />
              </div>
            </div>
          </div>
        </div>
      </div>
:
<div>Загрузка</div>
}
</>
    );
  }
}


export default App;

[Петр Мухуров]

не совсем верно, поскольку при первом рендере стейт проинициализирован как

{
  title: {}
}

соответственно, ошибка падает уже после запроса, очевидно, в респонзе title === undefined