Question

尝试将从数据库中获得的数组从一个组件发送到另一个组件时遇到问题。我的意思是，我正在获取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)

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;

将数组传递给组件

1 个答案: