问处理rest api中的图像和链接并在React中显示它们的最佳方法

EN

src={post.urlToImage}
href={post.url}

import React, { Component } from 'react';
import '../about/about.css';

class About extends Component {

    state = {
        loading: false,
        data: []
    }

    componentDidMount() {
        this.setState({ loading: true })
        console.log('app mounted');
        fetch('https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=8')
            .then(data => data.json())
            .then(data => this.setState({ data: data.articles, loading: false }))
    }

    render() {
        return (
            <div className="about">
                {this.state.loading
                    ? "loading..."
                    : <div>
                        {this.state.data.map((post, indx) => {
                            return (
                                <div className="container about text-left mt-5" key={indx}>
                                    <h5>{post.title}</h5>
                                    <p>{post.description}</p>

                                    <div className="media">
                                        <img className="align-self-start mr-3" src={post.urlToImage} alt="Alt text"></img>
                                        <div className="media-body">
                                            <h5 className="mt-0">Top-aligned media</h5>
                                            <a href={post.url} target="_blank">Read More</a>
                                        </div>
                                    </div>
                                </div>
                            )
                        })}

                    </div>
                }
            </div>
        )
    }
}
export default About;