fetch 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 添加值？我提到了这个解决方案Post an object with fetch using react js and express API server，但它不适用于我的应用程序。

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）。