reactjs - 无法映射使用 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>
)
})
}```
解决方案
推荐阅读
- typescript - 从泛型接口的类型创建泛型函数
- java - 如何在 Java 中将 JSON 字符串拆分为两个 JSON 对象
- javascript - 使用 React 传递参数
- excel - Excel:将公式应用于另一个公式中列中的每个单元格
- r - R类和DMwR包knn函数之间的区别?
- dart - 如何在 0.6、1,6、2,6、...处舍入数字?
- java - 如何使用方法在类之间传递信息
- php - HTML 正文居中对齐
- sql - 在 SQL Server 中,我可以手动实现 avg 函数吗?传递要使用的列名的问题
- python - 这在 Python '\x1b[2K' 中意味着什么?