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

Question

我实际上正在学习反应。当我尝试遍历我的数据库时遇到了这个错误，所以为了解决这个问题，我尝试创建一个数组并添加一些信息，但是问题已经存在，有人可以帮帮我吗？

这是代码：

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

标签： reactjstypeerror

Answer 1

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

您还可以通过this.state.items.