組件未定義 // 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{}