问将数组传递给组件
EN

Stack Overflow用户

提问于 2020-04-22 16:03:21

回答 1查看 104关注 0票数 2

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

reactjs

react-router

material-ui

有奖征集｜云上CPU玩转AIGC挑战赛

参加活动赢取洛斐键盘、小米电纸书、智能音响等鹅厂周边！

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-04-22 16: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;