React 请求库不适用于 componentDidMount

Question

我试图从网页中抓取一些数据，我做了以下功能代码。我需要在我的 React 应用程序中使用它，但它不起作用。

第一个代码（运行没问题）：

var express = require('express');
var fs = require('fs');
var request = require('request');
var cheerio = require('cheerio');
var app = express();

app.get('/scrape', function (req, res) {
    url = 'http://www.foo.com/';

    request(url, function (error, response, html) {
        if (!error) {
            var $ = cheerio.load(html);

            var title, release, rating;
            var json = { title: "", release: "", rating: "" };

            $('h2').filter(function () {
                var data = $(this);
                json.title = data.text();
            });

            $('#journalDescription').filter(function () {
                var data = $(this);
                json.release = data.text();
            });

            $('h3').filter(function () {
                var data = $(this);
                json.rating = data.text();
            });
        }
        fs.writeFile('output.json', JSON.stringify(json, null, 4), function (err) {
            console.log('File successfully written! - Check your project directory for the output.json file');
        })
        res.send('Check your console!')
    });
})

app.listen('8081')
exports = module.exports = app;

我将其修改为下面的代码以便在 App.js 文件中使用：

var express = require('express');
var fs = require('fs');
var request = require('request');
var cheerio = require('cheerio');

export default function getDadosBasicosUFC() {
    let ufc = {
        url: "http://foo.com",
        titulo: "",
        edicao: "",
        descricao: "",
        sumario: {
            url: "",
            artigos: []
        },
        titulosArtigos:  [],
        autoresArtigos:  []

    }

    request(ufc.url, function (error, response, html) {
        if (!error) {
            var $ = cheerio.load(html);

            $('h2').filter(function () {
                var data = $(this);
                ufc.titulo = data.text();
            });

            $('#journalDescription').filter(function () {
                var data = $(this);
                ufc.descricao = data.text();
            });

            $('h3').filter(function () {
                var data = $(this);
                ufc.edicao = data.text();
            });

            $('.menu').filter(function () {
                var data = $(this);
                ufc.sumario.url = data.children().first().children().first().attr('href');
            });
        }
    });
    return ufc;
}

App.js 我尝试使用的代码：

import React, { Component } from 'react';
import getDadosBasicosUFC from './RevistasResource'

class App extends Component {

    constructor() {
        super();
        this.state = {
            ufc: null
        }
    }

    componentDidMount() {
        let ufcData = getDadosBasicosUFC();
        this.setState({ufc: ufcData});
        console.log(this.state.ufc);
    }
}
export default App;

该项目是使用 create-react-app 创建的。当我运行它出现以下错误时：

TypeError: http.IncomingMessage is undefined
./node_modules/express/lib/request.js
node_modules/express/lib/request.js:31

  28 |  * @public
  29 |  */
  30 | 
> 31 | var req = Object.create(http.IncomingMessage.prototype)
  32 | 
  33 | /**
  34 |  * Module exports.

如何将我的代码修复到 App.js 中的运行？谢谢

Answer 1

正如 Evan Trimboli 在评论中所说，如果请求是异步的，试试这个。

async componentDidMount() {
  let ufcData = await getDadosBasicosUFC();
  this.setState({ufc: ufcData});
  console.log(this.state.ufc);
}

这在使用 axios 时对我有用，我认为它在使用 request 时也应该有效。但是要在应用程序中使用它，你需要配置 ES7 async/await 或者如果使用 create-react-app 它已经配置好了。

而且你还需要制作getDadosBasicosUFC异步方法，等待结果返回。

React 请求库不适用于 componentDidMount

React request lib dont work on componentDidMount

javascript

reactjs

node-request

create-react-app