小编Ric*_*ick的帖子

我有一个包含标题,描述和图像URL属性的10个对象的数组(让我们称之为"博客").我需要在HTML标记中包装每个属性并将它们全部导出,以便它们一起加载到网页上.

使用我当前的代码,我只获得页面上当前状态加载中的一个对象.如何让所有对象处于相同状态？

class NewBlogs extends React.Component {
    constructor(props) {
        this.state = {
            title: [],
            description: [],
            image: [],
            loading: true
        };
    }
    componentDidMount() {
        axios.get('/new-blogs').then(data => {
            const blogs = data.data;
            var component = this;

                for(var i in blogs) {
                    component.setState({
                        title: blogs[i].title,
                        description: blogs[i].description,
                        image: blogs[i].image,
                        loading: false
                    });
                }
            })
            .catch(function(error) {
                console.log(error);
            });
        }
        render() {
            return (
                <div>
                    <h2>New Blogs:</h2>
                    <h3>{this.state.title}</h3>
                    <em>{this.state.description}</em>
                    <img src={this.state.image}></img>
                </div>
            );
        }
    }
    export default NewBlogs