将数组传递给组件

Posted 2023-02-21

【中文标题】将数组传递给组件

【英文标题】：Pass array to component

【发布时间】：2020-08-05 17:49:00

【问题描述】：

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

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;

【讨论】：

这里的问题是'movies'没有定义，我应该把它作为一个全局变量吗？

是的，我修改了它，不，你需要使用该州的电影。我刚刚编辑了答案！

按照你的建议，如果我做 console.log(this.props.movi​​es) 它是未定义的：/

您能创建一个实时代码以便我检查吗？你的代码中可能有一些东西破坏了它

再次编辑！ MovieList 组件现在应该可以正常工作了