组件未定义 // 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);

英雄联盟

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.so 中导入组件，所以你必须从 '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);

Answer 2

使用 React 组件的方式

import React, {Component} from 'react';
class App extends Component{}

其他方式如果你不导入，直接导入

import React from 'react';
class App extends React.Component{}