javascript - 组件未定义//React和Webpack

Question

我正在构建一个 React 应用程序，它将从 Opendota 的 api 中提取并向我显示英雄。这是我第一次使用 API。我从头开始构建应用程序，所以我没有使用 CRA (create-react-app)。

这是我的 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);

英雄.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

只是寻找一个能够为我指明正确方向的答案。

Answer 1

您还没有从react导入组件。所以您必须从'react'导入组件。所以您的代码将如下所示

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);