Javascript React组件从数据库导入数据

我正在使用React构建一个web应用程序，其中我有一个组件（product.js），一个表单连接到db，另一个组件需要使用之前插入表单中的数据。表单正在工作，并且正在将信息发送到mongodb，但是我正在努力将数据获取到最后一个组件（Output.js），在那里我需要访问该数据。流程从product.js到另一个comp profile.js，然后到output.js。我肯定是错过了什么，或者做错了什么，但到目前为止还没能让它起作用。非常感谢您提供的任何帮助或建议

Product.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;

Product.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;

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;

import React，{Component}来自'React'；
从“axios”导入axios；
类产品扩展组件{
建造师（道具）{
超级（道具）；
this.state={name:，price:，category:}；
}
handleFormSubmit=（事件）=>{
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“，{名称、价格、类别}）
.然后（（）=>{
this.props.getData（）；
log（“添加到数据库！”）；
this.setState（{name:，price:，category:}）；
})
.catch（错误=>console.log（错误））
}
handleChange=（事件）=>{
常量{name，value}=event.target；
this.setState（{[name]：value}）；
}
render（）{
返回(
名称
this.handleChange（e）}/>
类别
this.handleChange（e）}/>
价格
this.handleChange（e）}/>
)
}
}
出口默认产品；

Output.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;

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;

import React，{Component}来自'React'；
从“axios”导入axios；
类输出扩展组件{
建造师（道具）{
超级（道具）；
this.state={}；
}
componentDidMount（）{
这个.getProduct（）；
}
getProduct=（）=>{
const params=this.props.match
console.log（this.props）；
axios.get(`http://localhost:5000/product/:productId`)
.然后（responseFromApi=>{
log（“就是这样”，responseFromApi）；
const theProduct=responseFromApi.data；
console.log（“>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>这是产品”，产品）；
此.setState（产品）；
})
.catch（err=>console.log（err））；
}
render（）{
返回(
{this.state.price}
结果
)
}
}
导出默认输出；

axios.get（'http://localhost:5000/product/:productId“）

您是否在此处放置了有效的

productId

？（在客户端

getProduct

中）渲染中也可能存在键入错误，您是指

{this.state.theProduct.price}

？