Javascript 反应：使用axios向MongoDB发布状态

我正试图通过Axios的Express和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" alt="logo" />
          <h1 className="App-title">Welcome to Shopping Center</h1>
        </header>
      <div>
        <div>
          {this.state.data}
        </div>
        <Service url={Product1} desc="Manage" alt="MA" purchased={this.state.items[0].purchased} thisClick={ (desc) => this.handleClick("Manage")} />
        <Service url={Product2} desc="Deliver" alt="DE" purchased={this.state.items[1].purchased} thisClick={ (desc) => this.handleClick("Deliver")}/>
        <Service url={Product3} desc="Market" alt="MR" 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;

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

Th

req.query

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

---

我哪里做错了？

请在服务器中使用

app.post

，当前您正在创建get端点，您应该首先创建post端点以发出post请求。

---

还请检查以访问

req.body

我们需要使用body解析器中间件，它在处理程序之前解析中间件中的传入请求体

安装 >

---

这是因为您将路由处理程序定义为get方法，并且实际上发出了post请求。@AmrAly谢谢，我现在更改了它，它工作正常。但是，当我执行console.log（req.body）时，它是一个空对象。@spencer您需要像这样在构造函数中绑定this.getAddedItems这个函数。getAddedItems=this.getAddedItems.bind（this）；所以在这个函数中，这个.state是可访问的。当前函数未绑定，它返回未定义，这就是为什么req.body是undefined@Think-已经有两次了。我试图在我的handleSubmit函数中打印我们的

添加的

，但我确实看到正确的对象被打印出来。@AmrAly请这样做，以便我可以打开另一个question@Amr阿利是第一个指出乌米尔·法鲁克错误的人。您可以查看此问题下的第一条评论。此问题有效。你一次解决了我的两个问题。非常感谢你！

//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()
    });
  });*/
});

$ npm install body-parser

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

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