Как сделать асинхронный контент в React?

Question

Я создаю SPA на основе WP API и хочу визуализировать как посты, так и их избранные изображения, но они располагаются в отдельных конечных точках.

При рендеринге React не ждет, пока запрос разрешится и получитошибка: «Непринятое инвариантное нарушение: объекты недопустимы как дочерний элемент React (найдено: [обещание объекта]).»

Абсолютно новичок в функциях Promise и Async / Await. Даже не знаю, правильно ли я его использую.

import React, { Suspense, Component } from "react";
import { FontSizes, FontWeights, PrimaryButton, DefaultButton } from 'office-ui-fabric-react';
import axios from "axios";
import './Home.styl'

class Home extends Component {
    constructor() {
      super();

      this.state = {
        posts: []
      }
    }

    componentWillMount() {

      this.renderPosts();

    }

    renderPosts() {

      axios.get('https://cors-anywhere.herokuapp.com/https://sextou.didiraja.net/wp-json/wp/v2/posts')
      .then((response) => {
        // console.log(response)

        this.setState({
          posts: response.data,
        })
      })
      .catch((error) => console.log(error))

    }

    async getImg(mediaId) {

      const getImg = axios
        .get('https://cors-anywhere.herokuapp.com/https://sextou.didiraja.net/wp-json/wp/v2/media/17')
        .then((response) => {
          return {
            url: response.data.source_url,
            alt: response.data.alt_text,
          }
        })

      const obj = getImg

      return (
        <img src={obj.url} />
      )

    }

    render() {

      const { posts } = this.state

      return (
        <span className="Home-route">

        <h1 style={{textAlign: 'center'}}>Sextou!</h1>

          <div className="events-wrapper">
            {
              posts.map((post, key) => {
                return (
                <div className="event-card" key={key}>

                  <img src={this.getImg()} />

                  <h2
                    className="event-title"
                    style={{ fontSize: FontSizes.size42, fontWeight: FontWeights.semibold }}
                  >
                    {post.title.rendered}
                  </h2>

                  {post.acf.event_date}

                  <span>{post.excerpt.rendered}</span>

                  <a href={post.acf.event_link} target="_blank">
                    <DefaultButton
                      text="Acesse o evento"
                    /> 
                  </a>

                  <a href={post.acf.event_ticket} target="_blank">
                    <PrimaryButton
                      text="Comprar ingressos"
                    /> 
                  </a>

                </div>

                )
              })
            } 
          </div>


        </span>
      );
    }
  }
  export default Home;

Answer 1

Вы можете получить изображения таким же образом, как и сообщения:

Включить их в state

this.state = {
  posts: [],
  image: null
};

Вызов getImage в componentWillMount

componentWillMount() {
  this.getPosts();
  this.getImage();
}

setState при разрешении обещания:

.then(response => {
  this.setState(state => ({
    ...state,
    image: {
      url: response.data.source_url,
      alt: response.data.alt_text
    }
  }));
});

Отображение экрана загрузки или счетчика до тех пор, пока изображение не загрузится

render() {

  const { posts, image } = this.state;

  if (!image) {
    return "Loading";
  }

  // ...
}

Я бы также советовал использовать componentDidMount вместо componentWillMount, потому что componentWillMount устарело и считается небезопасным.

Вот пример коды и коробки .