Question

我是一个有抱负的反应开发者，我的应用程序存在一些问题。

我正在努力争取纽约时代的一项任务，我可以通过搜索来获取我的数据来记录服务器端，但我似乎无法将其传回去。我可以通过将其推送到MongoDB来获取我的数据，然后在与前端分开的进程中查询它，但我不想这样做。

我想将对象传递回堆栈到客户端。有谁知道我怎么能做到这一点？

这是我的一些代码。

我的目录结构：

这是客户端文件夹结构：

这是我的Home.jsx文件客户端在/ 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 /中调用clientside 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)
    }
};

这是我的后端routes / index.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)
    }

}

最后，这是后端的刮刀文件：

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。这只是因为我无法弄清楚如何将数据传回刚存储在变量中。

我真的不想将所有结果都推送到db，然后对它们进行查询。我想要一个保存文章功能，你只保存你真正想要的那些。

我真的很感激你的任何帮助，我还不是很擅长这一切！

提前谢谢

Answer 1

您应该将articleData发送给客户端，然后使用承诺的.then()方法在客户端获取它。

这样的事情：

scraper: function (req, res) {
    let queryData = req.body.query
    const articleData = scraper(queryData)

    // return your json to the client
    res.json(articleData)
},

然后你应该在客户端收到这些数据，如下所示：

handleFormSubmit = event => {
    event.preventDefault()
    let query = this.state.formInput
    API.scrapeArticles(query)
       .then(resp => {
            this.setState({ posts: resp })
       })
}

（React和axios）Mern数据流问题！ HALP！ :(

1 个答案: