提取POST在Express API服務器React FrontEnd中僅返回_id對象

Question

我正在嘗試制作一個React-Node.js應用程序進行練習。 我在發送POST請求時遇到問題。 當我在App.js中獲取POST請求時，它僅返回ID。 我希望它能再返回3個值。

當前對象

{ _id: 5a046d52bb5d37063b3c8b21 }

理想對象

{_id: "59e9fed60fe8bf0d7fd4ac6e", name: "recipe1", ingredients: "apple", descriptions: "cut an apple"}

如何正確將值添加到req.body？ 我引用了此解決方案，使用react js和express API服務器通過fetch發布對象，但是它不適用於我的應用。

index.js（node.js）

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

 // Serve static files from the React app
app.use(express.static(path.join(__dirname, 'client/build')));

app.use(bodyParser.urlencoded({ extended: true}));

var db

const MongoClient = require('mongodb').MongoClient

MongoClient.connect
('mongodb://Recipe:recipebox@ds125914.mlab.com:25914/ayumi', (err, database) => {
 if (err) return console.log(err)
 db = database
 app.listen(8080, () => {
    console.log('listening on 8080')
 })
 })

 app.get('/api', (req,res)=> {
     db.collection('recipe').find().toArray((err, results) => {
     if(err) return console.log("no recipe");
         res.json(results);
     })
 })

 app.post('/recipe', (req,res)=>{
     db.collection('recipe').save(req.body, (err, result) => {
     if(err) return console.log(err);
          console.log(req.body)
    console.log('save to database');
    res.redirect('/');
})
})

App.js（反應）

class App extends Component {
constructor(props){
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
}

handleSubmit(e){
  e.preventDefault();
  fetch('/recipe', {
       method: 'POST',
       body: JSON.stringify({
           name: this.refs.name.value,
           ingredients: this.refs.ingredients.value,
           descriptions: this.refs.descriptions.value
       }),
       headers: {"Content-Type" : "application/json"}
       })
  .then((res)=> {
      return res.json()
  })
  .then((body)=>{
      console.log("body" + body)
      console.log("result" + this.refs.name.value)
  })
}

render() {

return (
  <div className="App">
  <h1>Recipe List</h1>
  <form onSubmit={this.handleSubmit}>
  <input type="text" placeholder="name" ref="name" />
  <input type="text" placeholder="ingredients" ref="ingredients" />
  <input type="text" placeholder="descriptions" ref="descriptions" />
  <input type="submit"/>
  </form>
  </div>
  )
}

}

導出默認應用程序；

Answer 1

服務器端更改：

app.post('/recipe', (req, res) => {
  // log the body of the request, to make sure data is properly passed
  console.log(req.body);
  // use mongodb's insertOne instead of the deprecated save
  db.collection('recipe').insertOne(req.body, (err, result) => {
    if (err) return console.log(err);
    // log the result of db insertion
    console.log(result);
    console.log('saved to database');
    // send the freshly saved record back to the front-end
    res.json(result);
  });
});

前端更改：

class App extends Component {
  constructor(props){
    super(props);
    // add state to hold recipe returned from POST call
    this.state = {
      recipe: null,
      name: '',
      ingredients: '',
      descriptions: ''
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(e) {
    e.preventDefault();
    const { name, ingredients, descriptions } = this.state;
    fetch('/recipe', {
      method: 'POST',
      body: JSON.stringify({
        name,
        ingredients,
        descriptions
      }),
      headers: {"Content-Type" : "application/json"}
    })
    // when call completes, it should return the newly created recipe object
    // as it was saved in the DB - just store it into state
    .then((recipe)=> {
      this.setState({recipe});
    });
    // TODO: handle error case
  }

  render() {
    // added a paragraph tag to display the ID of the freshly created recipe
    // it's only displayed if recipe is not null or undefined
    // further changes: turning inputs into controlled inputs
    const { name, ingredients, descriptions } = this.state;
    return (
      <div className="App">
        <h1>Recipe List</h1>
        <form onSubmit={this.handleSubmit}>
          <input
            value={name}
            type="text"
            onChange={e => this.setState({ name: e.target.value })}
            placeholder="name" />
          <input
            value={ingredients}
            type="text"
            onChange={e => this.setState({ ingredients: e.target.value })}                
            placeholder="ingredients" />
          <input
            value={descriptions}
            type="text"
            onChange={e => this.setState({ descriptions: e.target.value })}
            placeholder="descriptions" />
          <input type="submit"/>
          { recipe &&
            <p>Saved ID: {this.state.recipe._id}</p>
          }
        </form>
      </div>
    );
  }
}

export default App;

進一步的更改：將所有三個文本輸入轉換為受控輸入（在狀態中跟蹤所有3個字段的值，並在提交表單時傳遞給fetch存）。