ReactJS和Axios中的Mern数据流问题

我是一个有抱负的react开发人员,我的应用程序有一些问题。

我正在努力从《纽约时报》上搜刮我的作业,我可以通过搜索日志服务器端来获取数据,但我似乎无法将其传回。我可以通过将数据推送到MongoDB,然后在前端的单独进程中查询数据来获取数据,但我不想这样做。

我想将对象从堆栈中传递回客户端。有人知道我怎样才能做到这一点吗?

这是我的一些代码。

我的目录结构:

以下是客户端文件夹结构:

这是我的家。jsx文件客户端in/pages:

import React, { Component } from 'react';
import { Container, Row, Column } from '../../components/BootstrapGrid';
import API from '../../utils/API'
import {Input, FormBtn} from '../../components/Form'
class Home extends Component {

    state = {
        formInput: "",
        posts: [],
    }

    loadArticles = (res) => {
        console.log('res')
    }

    handleInputChange = event => {
        const { name, value } = event.target;
        this.setState({
          [name]: value
        });
      };

      handleFormSubmit = event => {
        event.preventDefault();
        let query = this.state.formInput
        // console.log(query)
         API.scrapeArticles(query)

        //   console.log(this.state)

      };
    render() {
        return (
            <Container>
                <Row>
                    <Column>

                    </Column>
                    <Column>
                    <Input
                     value={this.state.formInput}
                     onChange={this.handleInputChange}
                     name="formInput"
                     placeholder="Search Query (required)"
                    />
                      <FormBtn onClick={this.handleFormSubmit}>Scrape NYT API</FormBtn>
                    </Column>
                </Row>
            </Container>
        );
    }
}

export default Home;

下面是我在client/utils/api/中调用客户端api的代码:

   import axios from "axios";

export default {
    // getPosts: function () {
    //     return axios.get('/api/posts')
    // },
    // savePost: function (postData) {
    //     return axios.post("/api/posts", postData);
    // },
    scrapeArticles: function (query) {
        // console.log(query)
        let queryData = {
            query: query
        }
        return axios.post('/api/scraper', queryData)
    }
};

这是我在后端路由/索引中的代码。js被axios击中(我想?我真的不知道是怎么回事,但我认为这就是流程):

    const path = require("path");
const router = require("express").Router();
const postsController = require('../controllers/postsController')

router.route("/")
  .get(postsController.getAll)
  .post(postsController.create);

router.route('/api/scraper')
  .post(postsController.scraper)
  .get(postsController.scraper)

// If no API routes are hit, send the React app
router.use(function (req, res) {
  res.sendFile(path.join(__dirname, "../client/build/index.html"));
});

module.exports = router;

这是上面文件中引用的我的控制器:

const scraper = require('../scraper')
const db = require('../models');

module.exports = {
    create: function (req, res) {
        db.Post
            .create(req.body)
            .then(dbmodel => res.json(dbmodel))
            .catch(err => res.status(422).json(err))
    },
    getAll: function (req, res) {
        db.Post
            .find(req.query)
            .sort({date: -1})
            .then(dbModel => res.json(dbModel))
            .catch(err => res.status(422).json(err))
    },
    scraper: function (req, res) {
        let queryData = req.body.query
          scraper(queryData)
    },
    scraperGet: function (req, res) {
        scraper()
        console.log(res.body)
    }

}

最后,这里是后端的scraper文件:

const request = require('request');
const mongoose = require('mongoose');
const db = require('./models');

const scraper = (queryData) => {
  console.log(`@scraper ${queryData}`)
  let articleData = []
  request.get({
    url: "https://api.nytimes.com/svc/search/v2/articlesearch.json",
    qs: {
      'api-key': "-----------------------------",
      "q" : queryData
    },
  }, function (err, response, body) {
    body = JSON.parse(body);
    let articles = body.response.docs
    articles.forEach(element => {
      // console.log(element)
      let title= element.headline.main
      let url = element.web_url
      let synopsis = element.abstract
      let snippet = element.snippet
      let source = element.source
      let pubDate = element.pub_date

      let article = {
        title: title,
        url: url,
        synopsis: synopsis,
        snippet: snippet,
        source: source,
        pubDate: pubDate,
      }
      // console.log(article)
      articleData.push(article)
      db.Post.create({title:article.title}).then(article => {
        console.log(article)
      }).catch(err => {
        console.log(err)
      })
    });
    return articleData

  });

}

module.exports = scraper;

所以我知道现在它正在向mongo推进。这只是因为我不知道如何将存储在变量中的数据传递回原处。

我真的不想把我所有的结果都推到数据库中,然后对它们进行查询。我想有一个保存文章的功能,你只保存你真正想要的。