Question

我有一个包含标题，描述和图像URL属性的10个对象（让我们称之为＃34;博客＆＃34;）的数组。我需要将每个属性包装在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完成后设置状态并设置加载假一次。

在反应渲染（）中你可以迭代你的列表。最简单的方法是使用＆＃39; .map（）＆＃39;。然后，您只需为列表中的每个对象返回react元素。

还要让我们重命名＆＃39;组件＆＃39;到＆＃39;列出＆＃39;

＆＃13;

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

＆＃13;

React对象数组的setState

1 个答案: