TypeError: это не определено происходит при использовании функций класса из разных функций

Question

Я пытаюсь передать данные в компонент reactjs, используя nodejs, создав простой API nodejs, размещенный на отдельном локальном хосте (: 9000). Но я получаю сообщение об ошибке.

TypeError: это не определено

Я считаю, что эта ошибка произошла из-за использования 'this' внутри отдельной функции. Но я не могу найти решение этой проблемы.

Код с ошибкой:

import React from 'react';
import ReactDOM from 'react-dom';

class News extends React.Component{


   constructor (props){
      super(props);
      this.state={apiResponse:""};

   }

   callAPI(){
      fetch("http://localhost:9000/testAPI")
      .then(res => res.text ())
      .then(res => this.setState({apiResponse: res}));


   }

   componentWillMount(){
      this.callAPI();
   }
}

function Newsexport() {
 return (
    <div class="container1">
       <h1>IT WORKS YO!</h1>
      <p>{this.state.apiResponse}</p> 
    </div>
  )
};

export default Newsexport;

Код простого API, размещенного на nodejs (/ api / rout / testAPI . js)

var express = require("express");
var router=express.Router();

router.get("/", function(req,res,next){
    res.send("API is working");

});

module.exports=router;

Answer 1

Вы используете this в функциональном компоненте, который является неправильным. Также вы устанавливаете состояние в одном компоненте и ожидаете значение в другом компоненте. Вместо этого объедините два компонента, как показано ниже -

 class News extends React.Component{

    constructor (props){
      super(props);
      this.state={apiResponse:""};
    }

    callAPI = () => {
      fetch("http://localhost:9000/testAPI")
        .then(res => res.text ())
        .then(res => this.setState({apiResponse: res}));
    }

    componentWillMount(){
      this.callAPI();
    }

    render() {
      return (
        <div class="container1">
          <h1>IT WORKS YO!</h1>
          <p>{this.state.apiResponse}</p> 
        </div>
      )
    }
  }
  export default News;

Дайте мне знать, если это поможет .