Импортированный класс не определен в ReactJS - PullRequest
Новая
       49

Импортированный класс не определен в ReactJS

0 голосов
/ 05 августа 2020

Итак, у меня есть эти два класса

Приложение. js

import React, { Component } from "react";
import APIController from './APIController';
import Beer from './Beer';
import "./App.css";

class App extends Component{
  state = { beers: [] };

  componentDidMount(){
    console.log(APIController.getAllBeers());
  }
  
  render(){
    return (
      <span className="App">
        {this.state.beers.map(beer => <Beer beer={beer} />)}

        <button>Add New Beer +</button>
      </span>
    )
  }
}

export default App;

APIController. js

class APIController {

  static getAllBeers() {
    fetch('/beers')
      .then(res => res.json())
      .then(beers => { return beers });
  }
}

export default APIController;

Добавление точки останова в метод componentDidMount показывает, что класс APIController не определен, и в результате выводит undefind в консоли. Я не понимаю в чем дело. Есть идеи?

Ответы [ 2 ]

0 голосов
/ 05 августа 2020

Ваш stati c метод getAllBeers ничего не возвращает. Чтобы исправить это, вы можете сделать следующее: 

static async getAllBeers() {
  let beers = await fetch('/beers');
  
  return beers.json();
}
0 голосов
/ 05 августа 2020

Измените код компонентов, как показано ниже 

// App.js
import React, { Component } from "react";
import APIController from './APIController';
import Beer from './Beer';
import "./App.css";

class App extends Component {
  state = { beers: [] };

  componentDidMount() {
    // Read the data and set it to state
    APIController.getAllBeers().then(beers => this.setState({ beers }));
  }
  
  render() {
    return (
      <span className="App">
        {this.state.beers.map(beer => <Beer beer={beer} />)}
        <button>Add New Beer +</button>
      </span>
    )
  }
}

export default App;



// APIController.js
class APIController {

  static getAllBeers() {
    return fetch('/beers') // Add a return key word here
      .then(res => res.json())
      .then(beers => beers);
  }
}

export default APIController;
...