导入的类在 React JS 中未定义答案

【问题标题】：Imported class is undefind in ReactJS导入的类在 React JS 中未定义
【发布时间】：2020-11-25 16:36:16
【问题描述】：

所以我有这两个类

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(){
    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。我不明白出了什么问题。有什么想法吗？

【问题讨论】：

由于您的 getAllBeers() 方法没有返回任何内容，它将打印 undefined
哦，所以我有这个{ return beers } 的方式不是返回从 API 获得的啤酒？
是的。 return 内的 .then() 将以异步方式工作。更新我的答案（需要更改两个文件代码）。检查它是否按预期工作

标签： javascript reactjs class import react-router

【解决方案1】：

如下更改您的组件代码

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

【讨论】：

我们去！谢谢你。经过多年的 Java 和 C# 之后，Javascript 可能会变得如此混乱。

【解决方案2】：

您的静态方法getAllBeers 不返回任何内容。要解决此问题，您可以执行以下操作：

static async getAllBeers() {
  let beers = await fetch('/beers');
  
  return beers.json();
}

【讨论】：