将数组传递给组件

Question

我在尝试将从数据库中获取的数组从一个组件发送到另一个组件时遇到问题。 我的意思是，我正在获取 JSON 数据，然后必须将该数据传递给另一个组件。 我正在考虑使用地图方法。 我检查了我的控制台，我注意到我从数据库中获得了正确的数据，但是当我试图按状态发送它时，在我想要获取信息的类中为空 获取对象的类：

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)

Answer 1

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;