Почему передается null вместо state?

Question

[Максим]

Есть компонент.
В ComponentDidMount получаем данные (массив объектов), которые потом записывает в state.
При первом рендере состояние null и соответственно выходит ошибка "TypeError: Cannot read property 'map' of null". Что вполне логично. Что я не понимаю? Что мне сделать, чтобы полученные данные отрендерились?

export default class Main extends Component {
  service = new PostServise();
  state = {
    data: null
  };

  componentDidMount() {
    this.service
      .getAllPost()
      .then( (data) => {
        console.log(data);
        this.setState({
          data: data
        });
      });
  }

  renderPosts(arr) {
    return arr.map(({id, title, text}) => {
      return (
        <section className = 'main__post post'
                  key = { id }>
          <a className = 'post__link' href='viewpost.html'>{title}</a>
          <p className = 'post__text'>{text}</p>
      </section>
      )
    });
  }

  render() {
    const item = this.renderPosts(this.state.data);
    return(
      <div>
        {item}
      </div>
    );
  }
};

Comments

[0xD34F]

Что я не понимаю?

Что можно проверять значения свойств в стейте и в зависимости от результатов проверки выполнять различные действия.

[Максим]

0xD34F, понял. Нужно добавить условие, что если там пусто, ничего не делать. Да?

[0xD34F]

Максим, если поняли - делайте.

[Максим]

0xD34F, сделал. Заработало. Всегда нужно выполнять такую проверку? Если в state пусто изначально.

[0xD34F]

Максим, ещё вы не понимаете, что вовсе не обязательно устанавливать именно null в качестве дефолтного значения.

[Максим]

0xD34F, спасибо за советы. Такие вещи сложно уловить, если их не знаешь. Я только учусь. Знаю, что можно установить пустой массив или объект. Как выбирать, что ставить в default?

Answer 1

[McBernar]

В реакте популярен прием

{ this.state.value && ( <>{this.state.value}</> ) }

Answer 2

[historydev]

По моему вы опечатались:

service = new PostServise() => service = new PostService()

Comments

[Максим]

Спасибо. Действительно опечатка, но пошла она еще раньше. Моя проблема была не в этом, но все равно спасибо.

[historydev]

Максим, Да не за что)

Answer 3

[Павел Диденко]

Проблема в том, что вы плохо понимаете жизненный цикл. Метод componentDidMount вызывается ПОСЛЕ первого рендера, а вы в рендере передаете null, поэтому и получаете такую ошибку.
Изучите жизненный цикл и для лучшего понимания вставьте консольлог в render, componentDidMount, ComponentDidUpdate, componentWillUnmount и посмотрите что и когда срабатывает