Реагировать на данные импорта компонента из БД - PullRequest
Новая
       34

Реагировать на данные импорта компонента из БД

0 голосов
/ 06 марта 2020

Я создаю веб-приложение с React, где у меня есть компонент (product. js), с формой, связанной с БД, и другой компонент, где мне нужно использовать данные, вставленные ранее в форму. Форма работает и отправляет информацию на mongodb, но я пытаюсь получить данные для последнего компонента (Output. js), где мне нужно получить доступ к этим данным. Поток идет от произведения. js к другому компу, профилю. js, а затем к выводу. js. Я, конечно, скучаю или делаю что-то не так, но до сих пор не смог заставить это работать. Любая помощь или предложения о том, как это сделать, с благодарностью.

Продукт. js Маршрут: 

const express = require('express');
const mongoose = require('mongoose');
const router = express.Router();

const Product = require('../models/product-model');


// POST route => to create a new product
router.post('/product', (req, res, next) => {
  const { name, price, category } = req.body;
  Product.create({
    name,
    price,
    category
  })
    .then(response => {
      res.json(response);
    })
    .catch(err => {
      res.json(err);
    });
});

// GET route => to retrieve a specific product
router.get('/product/:productId', (req, res, next) => {
  Product.findById(req.params.productId)
    .then(product => {
      console.log("this is it>>>>>>>>>>>>>", product)
      res.json(product);
    })
    .catch(error => {
      res.json(error);
    });
});


module.exports = router;

Продукт. js Реагирующий компонент: 

import React, {Component} from 'react';
import axios from 'axios';

class Products extends Component {
  constructor(props){
      super(props);
      this.state = { name: "", price: "", category: "" };
  }

  handleFormSubmit = (event) => {
    event.preventDefault();
    this.props.history.push('/profile');
    const name = this.state.name;
    const price = this.state.price;
    const category = this.state.category;
    axios.post("http://localhost:5000/product", { name, price, category })
    .then( () => {
        this.props.getData();
        console.log("added to db!");
        this.setState({name: "", price: "", category: ""});
    })
    .catch( error => console.log(error) )
  }

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

  render(){
    return(
      <div>
        <form onSubmit={this.handleFormSubmit}>
          <label>Name</label>
          <input type="text" name="name" value={this.state.name} onChange={ e => this.handleChange(e)}/>
          <label>Category</label>
          <input type="text" name="category" value={this.state.category} onChange={ e => this.handleChange(e)}/>
          <label>Price</label>
          <input type="number" name="price" value={this.state.price} onChange={ e => this.handleChange(e)} />

          <input type="submit" value="Submit" />
        </form>
      </div>
    )
  }
}

export default Products;

Вывод. js компонент: 

import React, {Component} from 'react';
import axios from 'axios';

class Output extends Component {
  constructor(props){
    super(props);
    this.state = {};
  }

  componentDidMount() {
    this.getProduct();
  }

  getProduct = () => {
    const params  = this.props.match
    console.log(this.props);
    axios.get(`http://localhost:5000/product/:productId`)
    .then( responseFromApi => {

        console.log("this is it", responseFromApi);
        const theProduct = responseFromApi.data;
        console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>this is the product", theProduct);
        this.setState(theProduct);
    })
    .catch(err => console.log(err));
  }

  render() {
    return (
      <div>
        <h1>{this.state.price}</h1>
        <h1>results</h1>
      </div>
    )
  }
}

export default Output;
...