Question

我已经在生产服务器上设置了我的react项目。我收到此错误。

未捕获的错误：元素类型无效：预期为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。您可能忘记了从中导出组件它在其中定义的文件。

这是我的代码：

Component.js

import React, { Component, PropTypes } from 'react'
import { Match, Link, Redirect } from 'react-router'
import AppBar from 'material-ui/AppBar'
import IconButton from 'material-ui/IconButton'
import IconMenu from 'material-ui/IconMenu'
import MenuItem from 'material-ui/MenuItem'
import FlatButton from 'material-ui/FlatButton'
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert'
import Snackbar from 'material-ui/Snackbar'

import Home from '../Home/container'
import login from '../login/container'
import About from '../About/container'
import Management from '../Management/container'
import EditVenue from '../EditVenue/container'
import Users from '../Users/container'
import UserInfo from '../UserInfo/container'
import Review from '../Review/container'
import Places from '../Places/container'
import PlacesDetailStage from '../PlacesDetailStage/container'
import PlacesDetails from '../PlacesDetails/container'
import ViewPlacesProfile from '../ViewPlacesProfile/container'
import EditProfile from '../EditProfile/container'
import PlacesProfile from '../PlacesProfile/container'
import ViewPlace from '../ViewPlace/container'
import ViewPlaceStage from '../ViewPlaceStage/container'
import Booking from '../Booking/container'
import Bookinghistory from '../Bookinghistory/container'
import CategoriesAndSection from '../CategoriesAndSection/container'
import config from '../../config'
import firebase from '../../config/firebase'
import * as Phase from '../../constants/phase'

// import Reviews from '../AllReview/container'
//import logo from './logo.svg'
import './styles.scss'

const INDEX_ROUTE = config.INDEX_ROUTE
console.info('INDEX_ROUTE', INDEX_ROUTE)

export const storageKey = 'bordie123'

export const isAuthenticated = () => {
  return !!firebase.auth().currentUser || !!localStorage.getItem(storageKey)
}

export default class App extends Component {

  static propTypes = {
    windowResized: PropTypes.func.isRequired,
    windowWidth: PropTypes.number.isRequired,
    windowHeight: PropTypes.number.isRequired,
    loggedIn: PropTypes.bool,
    userStore: PropTypes.object
  }

  static defaultProps = {
    loggedIn: true
  }

  constructor(props) {
    super(props)
    this.handleResize = this.onResize.bind(this)
    this.goToHome = this.goToHome.bind(this)
    this.goToVenues = this.goToVenues.bind(this)
    this.goToAbout = this.goToAbout.bind(this)
    this.handleSignOut = this.handleSignOut.bind(this)
    this.goToUsers = this.goToUsers.bind(this)
    this.goToPlaces = this.goToPlaces.bind(this)
    this.goToPlacesDetailStage = this.goToPlacesDetailStage.bind(this)
    this.goToPlacesDetails = this.goToPlacesDetails.bind(this)
    this.goToViewPlacesProfile = this.goToViewPlacesProfile.bind(this)
    this.goToReview = this.goToReview.bind(this)
    this.goToCategoriesAndSection = this.goToCategoriesAndSection.bind(this)
    this.goToBooking = this.goToBooking.bind(this)

    this.handleCloseSnack = this.handleCloseSnack.bind(this)
    this.state = {
      userCreated: false,
      userUpdated: false
    }
  }

  componentWillReceiveProps(nextProps) {
    const prevUserStore = this.props.userStore
    const userStore = nextProps.userStore

    const prevPostPhase = prevUserStore.get('postPhase')
    const postPhase = userStore.get('postPhase')

    const prevPutPhase = prevUserStore.get('putPhase')
    const putPhase = userStore.get('putPhase')

    if (prevPostPhase === Phase.LOADING && postPhase === Phase.SUCCESS) {
      this.setState({
        userCreated: true
      })
    }
  }

  handleCloseSnack(key) {
    const state = {}
    state[key] = false
    this.setState(state)
  }

  componentDidMount() {
    window.addEventListener('resize', this.handleResize)
    this.handleResize()

    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        window.localStorage.setItem(storageKey, user.uid)
        this.setState({ uid: user.uid })
      } else {
        window.localStorage.removeItem(storageKey)
        this.setState({ uid: null })
      }
    })
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize)
  }

  onResize(/* event */) {
    this.props.windowResized(window.innerWidth, window.innerHeight)
  }

  goToHome() {
    //this.context.router.transitionTo(`${config.INDEX_ROUTE}/`)
    this.context.router.transitionTo('/')
  }
  goToVenues() {
    //this.context.router.transitionTo(`${config.INDEX_ROUTE}/venues`)
    this.context.router.transitionTo('/venues')
  }
  goToUsers() {
    this.context.router.transitionTo('/users')
  }
  goToPlaces() {
    this.context.router.transitionTo('/places')
  }
  goToPlacesDetails() {
    this.context.router.transitionTo('/placesDetails')
  }
  goToPlacesDetailStage() {
    this.context.router.transitionTo('/PlacesDetailStage')
  }
  goToViewPlacesProfile() {
    this.context.router.transitionTo('/ViewPlacesProfile')
  }
  goToAbout() {
    this.context.router.transitionTo('/about')
  }

  goToReview() {
    this.context.router.transitionTo('/review')
  }
  goToCategoriesAndSection() {
    this.context.router.transitionTo('/CategoriesAndSection')
  }
  goToBooking() {
    this.context.router.transitionTo('/booking')
  }

  handleSignOut() {
    console.info('Sign Out')
    firebase.auth().signOut().then((user, error) => {
      this.setState({ redirect: true })
    })
  }


  render() {
    const Logged = (props) => (
      <IconMenu
        {...props}
        iconButtonElement={
          <IconButton><MoreVertIcon /></IconButton>
        }
        targetOrigin={{
          horizontal: 'right',
          vertical: 'top'
        }}
        anchorOrigin={{
          horizontal: 'right',
          vertical: 'top'
        }}
      >
        <MenuItem
          primaryText="Home"
          value="/"
          onTouchTap={this.goToHome}
        />
        <MenuItem
          primaryText="Venues"
          value="/venues"
          onTouchTap={this.goToVenues}
        />
        <MenuItem
          primaryText="Reviews"
          value="/review"
          onTouchTap={this.goToReview}
        />
        <MenuItem
          primaryText="Users"
          value="/users"
          onTouchTap={this.goToUsers}
        />
        <MenuItem
          primaryText="Places"
          value="/places"
          onTouchTap={this.goToPlaces}
        />
        <MenuItem
          primaryText="Places Details"
          value="/placesDetails"
          onTouchTap={this.goToPlacesDetails}
        />
        <MenuItem
          primaryText="PlacesDetailStage"
          value="/PlacesDetailStage"
          onTouchTap={this.goToPlacesDetailStage}
        />
        <MenuItem
          primaryText="Places Profiles"
          value="/ViewPlacesProfile"
          onTouchTap={this.goToViewPlacesProfile}
        />
        <MenuItem
          primaryText="Categories&Sections"
          value="/CategoriesAndSection"
          onTouchTap={this.goToCategoriesAndSection}
        />
        <MenuItem
          primaryText="Booking"
          value="/booking"
          onTouchTap={this.goToBooking}
        />
        <MenuItem
          primaryText="About"
          value="/about"
          onTouchTap={this.goToAbout}
        />
        <MenuItem
          primaryText="Sign out"
          value="/logout"
          onTouchTap={this.handleSignOut}
        />
      </IconMenu>
    )
    // const { windowWidth, windowHeight } = this.props


    return (
      <div className="App">
        <nav className="App-mainNav">
          {/*<img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to Are You Bored</h2>*/}
          <AppBar
            title="Bordie Development"
            iconElementRight={isAuthenticated() ? <Logged /> : (<Redirect to={{ pathname: '/login' }} />)}
          />
        </nav>
        <div className="App-pageContainer">
          {/*<Match exactly pattern={`${INDEX_ROUTE}/`} component={Home} />
          <Match exactly pattern={`${INDEX_ROUTE}/management`} component={Management} />
          <Match pattern={`${INDEX_ROUTE}/management/edit/:VenueID`} component={EditVenue} />
          <Match pattern={`${INDEX_ROUTE}/about`} component={About} />*/}
          <Match exactly pattern="/" component={Home} />
          <Match pattern="/venues/:VenueID/:part" component={EditVenue} />
          <Match exactly pattern="/venues/:VenueID" component={EditVenue} />
          <Match pattern="/ViewPlacesProfile/:ProfileID" component={EditProfile} />
          <Match exactly pattern="/users/:UserID" component={UserInfo} />
          <Match exactly pattern="/users" component={Users} />
          <Match exactly pattern="/users/" component={Users} />
          <Match exactly pattern="/review" component={Review} />
          <Match exactly pattern="/places" component={Places} />
          <Match exactly pattern="/CategoriesAndSection" component={CategoriesAndSection} />
          <Match exactly pattern="/placesProfile" component={PlacesProfile} />
          <Match exactly pattern="/ViewPlacesProfile" component={ViewPlacesProfile} />
          <Match exactly pattern="/PlacesDetailStage" component={PlacesDetailStage} />
          <Match exactly pattern="/placesDetailStageSearch/:search" component={PlacesDetailStage} />
          <Match exactly pattern="/placesDetailStage/:googlePlaceID" component={ViewPlaceStage} />
          <Match exactly pattern="/placesDetailStage/:googlePlaceID/:part" component={ViewPlaceStage} />
          <Match exactly pattern="/placesDetailStage/:googlePlaceID/:part/" component={ViewPlaceStage} />
          <Match exactly pattern="/placesDetailStage/:googlePlaceID/:part/:search" component={ViewPlaceStage} />
          <Match exactly pattern="/placesDetails" component={PlacesDetails} />
          <Match exactly pattern="/placesDetails/:googlePlaceID/:part" component={ViewPlace} />
          <Match exactly pattern="/placesDetails/:googlePlaceID" component={ViewPlace} />
          <Match exactly pattern="/login" component={login} />
          <Match exactly pattern="/login/" component={login} />
          <Match exactly pattern="/review/" component={Review} />
          <Match exactly pattern="/venues" component={Management} />
          <Match exactly pattern="/venues/" component={Management} />
          <Match exactly pattern="/about" component={About} />
          <Match exactly pattern="/about/" component={About} />
          <Match exactly pattern="/booking" component={Booking} />
          <Match exactly pattern="/booking/:bookingPlaceID" component={Bookinghistory} />
        </div>

        <Snackbar
          open={this.state.userCreated}
          message="New User Created!"
          autoHideDuration={5000}
          onRequestClose={this.handleCloseSnack.bind(this, 'userCreated')}
        />

        <Snackbar
          open={this.state.userUpdated}
          message="User updated successfully!"
          autoHideDuration={5000}
          onRequestClose={this.handleCloseSnack.bind(this, 'userUpdated')}
        />

      </div>
    )
  }
}

App.contextTypes = {
  router: PropTypes.object
}

Index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router'
import getMuiTheme from 'material-ui/styles/getMuiTheme'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import injectTapEventPlugin from 'react-tap-event-plugin'

import store from './store'
import AppContainer from './views/App/container'
import config from './config'
import './index.scss'

const { INDEX_ROUTE } = config

const ctaColor = '#ff69b4'
const muiTheme = getMuiTheme({
  palette: {
    primary1Color: ctaColor
  }
})

// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin()

// if (localStorage.userAuth) {
ReactDOM.render(
  <MuiThemeProvider muiTheme={muiTheme}>
    <Provider store={store}>
      <BrowserRouter basename={INDEX_ROUTE}>
        <AppContainer />
      </BrowserRouter>
    </Provider>
  </MuiThemeProvider>,
  document.getElementById('root')
)

Answer 1

您正在将组件导出为default，并且在使用该组件的组件中，您可能已经导入了import {component} from path/component.js。因此，只需将其更改为import component from path/component.js。

Answer 2

我认为您是从index.js文件中错误的路径导入了AppContainer组件，应该是：

import AppContainer from './views/App.js'

我真的不认为容器是文件而是文件夹。

元素类型无效：期望使用字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义

2 个答案: