React：使用 axios 将状态发布到 MongoDB

Posted 2023-02-22

【中文标题】React：使用 axios 将状态发布到 MongoDB

【英文标题】：React: use axios to post state to MongoDB

【发布时间】：2019-03-03 17:13:59

【问题描述】：

我正在尝试通过 Express 和带有 Axios 的 Node 将状态作为数据发布到 MongoDB。

class App extends React.Component 
  constructor(props)
    super(props)

    this.state=
      items: [
          desc:"Manage",
          price: 5000,
          purchased: false,
        ,
        
          desc:"Deliver",
          price: 2000,
          purchased: false,
        ,
        
          desc:"Market",
          price: 4000,
          purchased: false,
        
      ],
      data:null,
      DisabledButton: true
    
  

  getAddedItems()
    return this.state.items.filter(item => item.purchased)
  

  componentDidMount() 
    this.callApi()
      .then(res => this.setState( data: res[0].name))
      .catch(err => console.log(err));
  

  callApi = async () => 
    const response = await fetch('/test');
    const body = await response.json();
    console.log("body is" + body)
    if (response.status !== 200) throw Error(body.message);

    return body;
  ;

  handleClick(desc)
    const newItems = this.state.items.slice()
    this.printItems(newItems)
    for(var item of newItems)
      if(item.desc === desc)
        item.purchased = !item.purchased
      
    
    this.printItems(newItems)

    this.setState(
      items: newItems
    )
  

  printItems(items)
    console.log(items[0].purchased + "  " + items[1].purchased + " " + items[2].purchased)
  

  handleSubmit(e)
    e.preventDefault();
    const added = this.getAddedItems()

    axios.post('/add', added)
      .then(res => console.log(res))
      .catch(err => console.log(err));
  

  render()  
    return (
      <div className="App">
        <header className="App-header">
          <img src=logo className="App-logo"  />
          <h1 className="App-title">Welcome to Shopping Center</h1>
        </header>
      <div>
        <div>
          this.state.data
        </div>
        <Service url=Product1 desc="Manage"  purchased=this.state.items[0].purchased thisClick= (desc) => this.handleClick("Manage") />
        <Service url=Product2 desc="Deliver"  purchased=this.state.items[1].purchased thisClick= (desc) => this.handleClick("Deliver")/>
        <Service url=Product3 desc="Market"  purchased=this.state.items[2].purchased thisClick= (desc) => this.handleClick("Market")/>
      </div>
      <button type="button" className="btn btn-primary" onClick=(e) => this.handleSubmit(e)>
                    Added to Cart
      </button>
      </div>
    );
  


export default App;

getAddedItems() 返回状态中purchased 为true 的所有items。

在我的handleSubmit(e) 函数中，我使用axios 发出带有url "/add" 的post 请求

在我的 server.js 中，我有以下代码处理发布请求：

//Get a Post route
app.get('/add', (req, res) => 
  console.log(req.query)
  /*for (let item of req.query)
    console.log(item.desc)
    console.log(item.price)
  */
  /*MongoClient.connect(url,  useNewUrlParser: true , function(err, db) 
    if (err) throw err;
    var dbo = db.db("cart");
    var objs = req;
    dbo.collection("items").insertMany(objs, function(err, result) 
      if (err) throw err;
      console.log("Number of documents inserted: " + result.insertedCount);
      db.close()
    );
  );*/
);

我目前正在调试它，所以我注释掉了我 server.js 中的大部分代码

req.query 应该已经收到我从 react 发送的数据，但是当我执行 req.query 时，它是空的

我哪里做错了？

【问题讨论】：

那是因为您将路由处理程序定义为 get 方法，并且您实际上发出了一个 post 请求。

@AmrAly 谢谢，我改变了它现在它工作正常。但是，当我执行 console.log(req.body) 时，它是一个空对象。

@spencer 你需要在构造函数中绑定 this.getAddedItems 这个函数，比如 this.getAddedItems= this.getAddedItems.bind(this);这样在这个函数内部 this.state 是可访问的。目前该函数未绑定它返回未定义，这就是 req.body 未定义的原因

@Think-Twice 它已经可以访问了。我尝试在我的 handleSubmit 函数中打印我们的added，我确实看到打印了正确的对象。

@AmrAly 请这样做，我可以打开另一个问题

【参考方案1】：

要访问 req.body，我们需要使用 body-parser 中间件，它在处理程序之前在中间件中解析传入的请求正文。

安装

$ npm install body-parser

>

var app = require('express')();
var bodyParser = require('body-parser');

app.use(bodyParser.json()); // for parsing application/json

【讨论】：

这行得通。你一次解决了我的两个问题。非常感谢！

【参考方案2】：

请在服务器中使用app.post，目前您正在创建一个获取端点，您应该首先创建一个发布端点来发出发布请求。 也请查看https://expressjs.com/en/guide/routing.html

【讨论】：

@Amr Aly 是第一个指出错误 Umair Farooq 的人。您可以查看此问题下的第一条评论