ReactJs：使用地图浏览状态元素，TypeError：无法读取未定义的属性“ map”？

debugcn 发表于 Dev

卜拉希米·哈伦

我正在学习反应。并且当我尝试循环遍历数据库时遇到此错误，因此，为解决此问题，我尝试创建一个数组并在其中添加一些信息，但是问题已经存在，有人可以帮助我吗？

这是代码：

class Toto extends React.Component {
    
    constructor(props) {
        super(props);
        this.state = {
            items: {
                zappy_server: {
                    project_name: "Zappy Server",
                    project_description: "description",
                    src: "https://www.iphon.fr/app/uploads/2019/09/test-photo-iphone-11-pro-austin-mann-0.jpg",
                },
                my_teams: {
                    project_name: "My teams",
                    project_description: "description",
                    src: "https://www.iphon.fr/app/uploads/2019/09/test-photo-iphone-11-pro-austin-mann-0.jpg",
                },
                shell42: {
                    project_name: "42Sh",
                    project_description: "description",
                    src: "https://www.iphon.fr/app/uploads/2019/09/test-photo-iphone-11-pro-austin-mann-0.jpg",
                },
                trade: {
                    project_name: "Trade",
                    project_description: "description",
                    src: "https://www.iphon.fr/app/uploads/2019/09/test-photo-iphone-11-pro-austin-mann-0.jpg",
                },
            },
            isLoaded: false,
        }
    }

    componentDidMount() {
        this.setState({
            isLoaded: true,
        })
    }
    render () {
        return (
            <Carousel className="caro">
                {this.items.map(item => (
                    <Carousel.Item>
                        <img
                            className="img-size"
                            src={item.src}
                            alt="Third slide"
                        />
                        <Carousel.Caption>
                            <h3>{item.project_name}</h3>
                            <p>{item.project_description}</p>
                        </Carousel.Caption>
                    </Carousel.Item>
                ))}
            </Carousel>
        )
    }
}
export default Toto

马特·阿夫特

您的项目是一个对象而不是数组。更改items: { ...}为items: [...]。

您也可以通过访问状态this.state.items。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。