reactjs - React setState 对象数组

Question

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

使用我当前的代码，我只能在页面上加载当前状态下的 1 个对象。如何使所有对象处于同一状态？

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。

在 React render() 中，您可以迭代列表。最简单的方法是使用“.map()”。然后，您只需返回列表中每个对象的 react 元素即可。

另外，我们将“组件”重命名为“列表”

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