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

- Rick

Answer 1

我没有运行/测试过这个，但可以试试这样做：

该API调用似乎返回一个对象列表。如果是这样，那么一旦xhr完成，只需设置状态并将加载设置为false即可。

在react 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

- Shawn K

---

谢谢。这让我找到了正确的方向。我遇到了一个错误：“TypeError: Cannot convert undefined or null to object at Function.keys (<anonymous>)”。我会继续调试代码，明天再看看。等我解决了问题，就会标记为正确答案。 - Rick