javascript - 组件未定义// React和Webpack(Component is not defined// React and Webpack)

Question

I'm building a React App that will pull from Opendota's api and display the heroes to me.(我正在构建一个将从Opendota的api中提取并向我展示英雄的React App。)

This is my first time working with API's.(这是我第一次使用API??。) I build the App from scratch, so I didn't use CRA (create-react-app).(我从头开始构建应用程序，所以我没有使用CRA（create-react-app）。) This is my App.js(这是我的App.js) import React from 'react'; import {hot} from "react-hot-loader"; import Heroes from "./components/Heroes" class App extends Component { render() { return ( <Heroes heroes={this.state.heroes} /> ) } state = { heroes: [] }; componentDidMount() { fetch('https://api.opendota.com/api/heroes') .then(res => res.json()) .then((data) => { this.setState({ heroes: data }) }) .catch(console.log) } } export default hot(module)(App); Heroes.js(Heroes.js) import React from 'react' const Heroes = ({heroes}) => { return ( <div> <h1>Hero List</h1> {heroes.map((hero) => ( <div> <div> <h5>{hero.name}</h5> <h6>{hero.id}</h6> </div> </div> ))} </div> ) }; export default Heroes Just looking for an answer that will point me in the right direction.(只是寻找一个可以为我指明正确方向的答案。)   ask by 4156 translate from so

Answer 1

You have not imported Component from react.So yo must have to import Component from 'react' .so your code will be looks like(您尚未从react导入Component，所以您必须从'react'导入Component，这样您的代码将看起来像)

import React,{Component} from 'react'; import {hot} from "react-hot-loader"; import Heroes from "./components/Heroes" class App extends Component { render() { return ( <Heroes heroes={this.state.heroes} /> ) } state = { heroes: [] }; componentDidMount() { fetch('https://api.opendota.com/api/heroes') .then(res => res.json()) .then((data) => { this.setState({ heroes: data }) }) .catch(console.log) } } export default hot(module)(App);