将数组传递给组件
将数组传递给组件
提问于 2020-04-23 00:03:21
我在尝试将从数据库中获得的数组从一个组件发送到另一个组件时遇到问题。我的意思是，我正在获取JSON数据，然后必须将这些数据传递给另一个组件。我在考虑使用map方法。我检查了我的控制台，我注意到我从数据库中获得了正确的数据，但当我试图通过状态发送数据时，在我想要获取信息的类中，获取对象的类是null类：
import React from 'react'
import { withRouter } from 'react-router-dom'
import MovieList from './MovieList'
import MoviesService from '../services/MoviesService'
class MovieListGet extends React.Component {
constructor (props) {
super(props)
this.state = {
movies: []
}
}
async componentDidMount () {
await this._getMovies()
}
async _getMovies () {
const response = await MoviesService.getMovies()
this.setState({ movies: response.data })
console.log(this.state.movies)
}
async _deleteMovie (id) {
}
_navigateToCreateMovies () {
// Adrress
}
render () {
return (
<div>
<MovieList
movies = {this.state.movies}
onCreateMovie={this._navigateToCreateMovies.bind(this)}
onDelete={this._deleteMovie.bind(this)}
/>
</div>
)
}
}
export default withRouter(MovieListGet)必须获取数组的
/* eslint-disable react/prop-types */
import React from 'react'
import {...} from '@material-ui/core'
import { ... } from '@material-ui/icons'
class MovieList extends React.Component {
constructor (props) {
super(props)
const { movies } = props
this.state = {
_movies: []
}
}
componentDidMount () {
console.log(this.props.movie)
this.setState({ _movies: this.props.movies })
}
_renderMovies () {
if (!this.state._movies || this.state._movies.length < 1) {
return (
// Something
)
} else {
return this.state._movies.map(m => (
// something
)
)
}
}
render () {
return (
// Something
)
}
}
export default (MovieList)回答 1
Stack Overflow用户
回答已采纳
发布于 2020-04-23 00:07:41
MoviesListGet应该像这样传递道具：
<MovieList
movies={this.state.movies}
onCreateMovie={this._navigateToCreateMovies.bind(this)}
onDelete={this._deleteMovie.bind(this)}
/>然后在MoviesList组件中，你可以在你的renderMovies方法中这样使用它：
class MovieList extends React.Component {
renderMovies () {
if (!this.props.movies || this.props.movies.length < 1) {
return (
// Something
)
} else {
return this.props.movies.map(m => (
// something
)
)
}
}
render () {
return (
// Something
)
}
}
export default MovieList;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61369673
复制相关文章
相似问题
腾讯云开发者
