首页 > 解决方案 > 无法映射使用 mongoose 从 mongodb 导入的 json 数组

问题描述

我是使用 React 的新手,目前正在学校做一个项目。我的问题是我已经设置了一个连接到 mongodb 数据库的 api js 文件,并且我还有一个到集合的路由。然后在 ReactContext 我尝试获取集合并且有效。我的问题是,当我尝试从我的 MovieList 组件渲染它时,我得到“无法读取未定义的属性 'map'” 我已经控制台记录了我的 json 并且我得到了集合的文档,但是当它 ReactContext 返回它时,它变得未定义?

代码:

      //  let response = await fetch('/api/movies/')
      //  response = await response.json()
      //  return response
      var response = await fetch('/api/movies/')
      var data = await response.json()
      console.log(data)
      return data
    }

    const test = () => {
        let data = getMovies()
        console.log(data)
    }

    const [movies2, setMovies2] = useState(getMovies)

    return (
        <MovieContext.Provider value={{movies2}}>
            {props.children}
        </MovieContext.Provider>
    ) ```
Can someone see what the problem is?
When I used a dummy data in a const variable with the data it works.

This is the code which calls "map()".
```const list = () => {
        return movies.map((movie, i) => {
            return (
                <Card
                    key={movie.title + i}
                    body
                    inverse
                    className="mb-2"
                    style={{
                        backgroundColor: '#330000',
                        borderColor: '#FF0000'
                    }}
                >
                <Container>
                    <Row>
                        <img style={{
                            height: '100px'
                        }}  
                        src={movie.image} 
                        alt="movie"></img>
                        <Col>
                            <CardTitle>Titel: <br></br>{ movie.title }</CardTitle>
                            <CardText>Om: <br></br>{ movie.about }</CardText>
                            <CardText>Åldersgräns: <br></br>{ movie.age_limit }</CardText>
                            <CardText>Längd: <br></br>{ movie.length }</CardText>
                            <CardText>Pris: <br></br>{ movie.ticket_price }</CardText>
                            <div>
                                <ModalVideo channel='youtube' isOpen={isOpen} videoId={movie.movieTrailer} onClose={toggleIsOpen} />
                                <Button onClick={toggleIsOpen}>Spela Trailer</Button>
                            </div>
                        </Col>
                    </Row>
                </Container>
                </Card>
            )
        })
    }```

标签: reactjsreact-context

解决方案


推荐阅读