Передать массив в компонент - PullRequest
Новая
       23

Передать массив в компонент

2 голосов
/ 22 апреля 2020

У меня проблема с отправкой массива из моей БД из компонента в другой. Я имею в виду, я получаю 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)

1 Ответ

2 голосов
/ 22 апреля 2020

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;
...