材料-ui卡没有显示在反应网页上

Question

我将material-ui包导入到react / redux应用程序中。我试图以卡片格式显示多个搜索结果。

我使用过SimpleCard沙箱（https://codesandbox.io/s/m5pyx6qv18），他们将我的BandResults格式设置在沙箱上但不在我的应用程序中。

以下是BandResult js文件：

 import React, { Component } from 'react'
import PropTypes from 'prop-types'
import ReactPlayer from 'react-player'
import SpotifyPlayer from 'react-spotify-player'
import { SocialIcon } from 'react-social-icons'
import { reduxForm, Field } from 'redux-form'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import { withRouter } from 'react-router-dom'
import { bindActionCreators } from 'redux'
import { withStyles } from 'material-ui/styles'
import Card from 'material-ui/Card'
import CardContent from 'material-ui/Card'



const BandResult = props => 
        <div key={props.id}>
          <Card key={props.id}>
            <CardContent>Please Show Up</CardContent>
          </Card>
          </div>



BandResult.propTypes = {
    id: PropTypes.string,
    bandName: PropTypes.string,
    genre: PropTypes.string,
    numberOfMembers: PropTypes.number,
    spotify: PropTypes.string,


};





// in our Redux's state, this form will be available in 'form.login'

// Export our well formed login component
export default BandResult;

这是我在搜索结果数组的地图中的实现：

render() {
    const bands = this.props.resultSet

    return (
      <div>
        <div>{bands && bands.map((band) => <BandResult id={band.id} bandName={band.bandName} genre={band.genre} numberOfMembers={band.numberOfMembers} spotify={band.spotify} />)}</div>
      </div>
    )
  }
}

我的控制台错误输出是：

现在，卡片甚至没有出现，我无法弄清楚原因。当我使用常规div时，即：

const BandResult = props => 
        <div>
          {props.bandName}
          </div>

使用道具填充信息。

非常感谢任何帮助！