首页 > 解决方案 > 无法将 axios 数据从 React 传递到 Mongodb

问题描述

我从 API 检索数据并使用 axios 在 React 中显示它

import React, {useState, useEffect} from 'react'
import MaterialTable from 'material-table'
import axios from "axios";
import ActionAreaCard from './Card'
import AddIcon from "@material-ui/icons/AddAlarm";
import IconButton from "@material-ui/core/IconButton";
import ControlPointIcon from '@material-ui/icons/ControlPoint';

const DataTable = () => {

  const [tableData, setTableData] = useState([]);
  const [selected, setSelected] = useState([]);

  const handleSelectedRow = (event, row) => {
      event.preventDefault();
   console.log(row);
   setSelected(row);
   const newStock = {
     name: selected.name,
     symbol: selected.symbol,
     market_cap: selected.market_cap,
     price: selected.price

   }
  
    axios.post('http://localhost:3001/create', newStock)
  }

  console.log(selected);
  
  const columns = [
    {title: 'NAME', field: 'name', width: 200},
    {title: 'SYMBOL', field: 'symbol', width: 200},
    {title: 'MARKET CAP', field: 'market_cap', width: 200},
    {title: 'CURRENT PRICE', field: 'price', width: 200},
    {
        title: "Custom Add",
        field: "internal_action",
        editable: false,
        render: (rowData) =>
          rowData && (
            <IconButton
              color="secondary"
          
            >
              <ControlPointIcon />
            </IconButton>
          )
      }
  
  ]
  useEffect(() => {
        axios
          .get(
            "https://api.nomics.com/v1/currencies/ticker?key=abc&interval=1d,30d&convert=USD&per-page=100"
          )
          .then((res) => {
            console.log(res);
            setTableData(res.data);
          })
      }, []);
  return (
      <div>
      
      {/* <div> 
      <ActionAreaCard  className="card" />
      
      </div> */}
          <div >
      <MaterialTable style={{height: 600, width: '70%', left: '14%', top: 100}}
        data={tableData}
        columns={columns}
        title={"Stock Details Table"}
        options={{
      search: true
      
    }}
    actions={[
        {
          icon: 'save',
          tooltip: 'Save User',
          onClick: handleSelectedRow
          
        }
      ]}
        
      />
    </div>
      </div> )}

export default DataTable;

并单击一个按钮,我想将行数据发送到我的 MongoDb 数据库

这是我的代码

const express = require("express");
const router = express.Router();
const Stock = require("../models/stockModel");

router.route("/create").post((req,res) =>{
    const name = req.body.name;
    const symbol = req.body.symbol;
    const market_cap = req.body.market_cap;
    const price = req.body.price;
    const newStock = new Stock({
        name, 
        symbol, 
        market_cap, 
        price

    });
    newStock.save();
}
)

module.exports = router;

这是我的库存模型

const mongoose = require("mongoose");
const stockSchema = {
    name: String, 
    symbol: String,
    market_cap: Number, 
    current_price: Number 

}

const Stock = mongoose.model("Stock", stockSchema);

module.exports = Stock;

这是我的服务器代码

const express = require("express");
const app = express();
const cors = require("cors");
const mongoose = require("mongoose");

app.use(cors());
app.use(express.json());

mongoose.connect("mongodb+srv://admin@cluster0.mongodb.net/stockDB")
// // cpnnect to mongoose 
app.use("/", require("./routes/stockRoute"));
app.listen(30001, function(){
    console.log("express server is running on port 30001");
})

我的数据根本没有保存,我不断收到错误“xhr.js:210 POST http://localhost:3001/create net::ERR_CONNECTION_REFUSED”

标签: node.jsreactjsmongodbexpressaxios

解决方案


看起来服务器正在侦听端口 30001。会不会是 3001 的简单拼写错误?


推荐阅读