React对象数组的setState

Question

我有一个包含标题,描述和图像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

Answer 1

我没有运行/测试这个,但尝试这样的事情

API调用似乎返回对象列表.如果是这样,只需在xhr完成后设置状态并将加载设置为false一次.

在反应中,render()是您可以迭代列表的地方.最简单的方法是使用'.map()'.然后,您只需返回列表中每个对象的react元素.

还让我们将'component'重命名为'list'

class NewBlogs extends React.Component {
    constructor(props) {
        this.state = {
            list: [],
            loading: true
        };
    }
    componentDidMount() {
        axios.get('/new-blogs').then(data => {
            // const blogs = data.data;
            // var component = this;
            this.setState({list: data.data, loading: false })
                // for(var i in blogs) {
                //     this.setState({
                //         title: blogs[i].title,
                //         description: blogs[i].description,
                //         image: blogs[i].image,
                //         loading: false
                //     });
                // }
            })
            .catch(function(error) {
                console.log(error);
            });
        }
        render() {
            return (
                <div>
                    {this.state.list.map(e => (
                        <h2>New Blogs:</h2>
                        <h3>{e.title}</h3>
                        <em>{e.description}</em>
                        <img src={e.image}></img>
                    ))}
                    
                </div>
            );
        }
    }
    export default NewBlogs