Question

尝试将Sidebar.js组件导入App.js文件时收到以下错误：

元素类型无效：预期为字符串（对于内置组件）   或类/函数（用于复合组件），但得到：对象。您   可能忘记了从定义的文件中导出组件，   否则您可能混淆了默认导入和命名导入。

检查Sidebar的呈现方法。

我不知道要解决的问题，因为我感觉自己正确地导出/导入了？

这是我的Sidebar.js文件中的代码：

import React, { Component } from 'react';
import VenueList from './VenueList';

export default class Sidebar extends Component {
  render() {
    return (
      <div className="sidebar">
        <VenueList />
      </div>
    );
  }
}

这是我App.js文件中的代码：

import React, { Component } from 'react';
import './App.css';
import Map from './component/Map';
import Sidebar from './component/Sidebar';
import SquareAPI from './API/';

class App extends Component {

  constructor() {
    super();
    this.state = {
      venues: [],
      markers: [],
      center: [],
      zoom: 12
    };
  }
  closeAllMarkers = () => {
    const markers = this.state.markers.map(marker => {
      marker.isOpen = false
      return marker;
    })
    this.setState({ markers: Object.assign(this.state.markers, markers) });
  };
  handleMarkerClick = (marker) => {
    this.closeAllMarkers();
    marker.isOpen = true;
    this.setState({ markers: Object.assign(this.state.markers, marker) });
    const venue = this.state.venues.find(venue => venue.id === marker.id);

    SquareAPI.getVenueDetails(marker.id).then(res => {
      const newVenue = Object.assign(venue, res.response.venue);
      this.setState({ venues: Object.assign(this.state.venues, newVenue) });
      console.log(newVenue);
    });
  };
  //Set and retrieve FourSquare information
  componentDidMount() {
    SquareAPI.search({
      near: "Austin, TX 78729",
      query: "bar"
    }).then(results => {
      const { venues } = results.response;
      const { center } = results.response.geocode.feature.geometry;
      const markers = venues.map(venue => {
        return {
          lat: venue.location.lat,
          lng: venue.location.lng,
          isOpen: false,
          isVisible: true,
          id: venue.id
        };
      });
      this.setState({ venues, center, markers });
      console.log(results);
    });
  }
  render() {
    return (
      <div className="App">
        <Map {...this.state}
          handleMarkerClick={this.handleMarkerClick} />
        <Sidebar />
      </div>
    );
  }
}

export default App;

VenueList.js的代码：

import React, { Component } from 'react';
import ListItem from './ListItem';

export default class VenueList extends Component {
  render() {
    return (
      <ol className="venueList">
        <ListItem />
      </ol>
    );
  }
}

ListItem.js的代码：

import React, { Component } from 'react';

export default class ListItem extends Component {
  render() {
    return (
      <li className="listItem">
        Test
        </li>
    );
  }
}

如何解决React错误消息：“元素类型无效错误”

0 个答案: