перечислите один атрибут одного сообщения, тогда я повторю в цикле

Question

Я пишу очень простое приложение для реагирования, которое будет перечислять посты на моем сайте WordPress.1) Получить сообщения и установить их в переменную состояния.2) Успешный доступ к сообщениям от render().3) Перебирайте посты, отображающие заголовок и другую информацию о каждом посте.1 и 2 закончены, так что теперь мне нужно сделать 3. Когда я пытаюсь напечатать название поста, он говорит мне, что это cannot access 'title' of undefined..Я знаю, о чем вы думаете, и я могу напечатать сообщение, если напишу цикл, который печатает каждый ключ сообщения (закомментированный цикл), но если я пытаюсь распечатать значение только одного ключа, я получаю сообщение об ошибкеговоря, что сообщение не определено.

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class Widget extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            posts: []
        };
    }


    componentWillMount() {
      const theUrl = "http://localhost:8888/test-site/wp-json/wp/v2/posts";
      fetch(theUrl)
      .then(response => response.json())
      .then(response =>
        this.setState({
          posts: response,
        })
      )
    }


    render() {
      let post = this.state.posts[0];

      // for (var key in post) {
      //   console.log(key + ': ' + post[key]);
      // }

      let title = post['title'].rendered;

      let stringbuilder = '';

      try {
        stringbuilder +=  title + ', ';
    } catch {}


        return (
            <div>
              <h1>React Widget</h1>
              {stringbuilder}
            </div>
        );
    }
}

Widget.propTypes = {
  wpObject: PropTypes.object
};

Этот вопрос, вероятно, прост для некоторых более продвинутых разработчиков, но как я могу напечатать только атрибут title post?

Answer 1

Проблема в том, что React пытается визуализировать сообщения до того, как асинхронная выборка вернет результат и обновит состояние.

В вашем рендере просто проверьте, имеет ли posts больше 0 значений:

//...
    render() {
      const { posts } = this.state;

      if (posts && posts.length) {
        let post = posts[0];

        // for (var key in post) {
        //   console.log(key + ': ' + post[key]);
        // }

        let title = post['title'].rendered;

        let stringbuilder = '';

        try {
          stringbuilder +=  title + ', ';
        } catch {}


        return (
          <div>
            <h1>React Widget</h1>
            {stringbuilder}
          </div>
        );
      }

      // Return null while loading
      // Or, return useful info like <p>Loading Posts...</p>
      return null;
    } 
//...

Кроме того, вы должны использовать componentDidMount, поскольку componentWillMount устарело .