尝试在 table 中创建新条目时网络中的待处理状态

Question

正在尝试将新数据添加到 table 'recipes'。

console.log(data) 和 console.log(req.body) 给我输入并发送到后端的值，但它没有将它写入 table & 在 chrome 控制台的网络上，我得到一个待定状态

在后端创建配方index.js__

  api.post('/recipe', passport.authenticate('jwt', {
    session: false
  }), (req, res) => {
        const data = {
          recipe_name: req.body.name,
          recipe_meal: req.body.meal,
          recipe_author: req.body.author,
          recipe_description: req.body.description,
          recipe_ingredients: req.body.ingredients,
          recipe_preparation: req.body.preparation
        }
    console.log(req.body)
    db.query('INSERT INTO recipes SET ?', [data], (err, results) => {
            console.log(data)
      if (err) {
        res.status(500)
        return;
      }
      db.query('SELECT * FROM recipes', (err, rows) => {
        if (err) {
          res.status(500)
          return;
        }
        res.json({
          recipes: rows
        });
      })
    })
  });

在前端创建配方Profile.js__

handleCreate(){
   const jwt = localStorage.getItem('jwt')
   console.log(jwt)
   axios({
     method: 'post',
     data: {
      name: this.state.name,
      author: this.state.author,
      meal: this.state.meal,
      description: this.state.description,
      ingredients: this.state.ingredients,
      preparation: this.state.preparation
     },
     url: 'http://localhost:4000/api/recipe',
     headers: {
       'Authorization': 'Bearer ' + jwt
     }
   }).then((response) => {
     this.setState({ recipe: response.data });
     console.log(this)
   }).catch((error, res) => {
    if(error.response.status === 401) {
       console.log("Error:", error);
       alert("Failed")
     }
   })
 }

输入字段示例：

<TextField helperText="Enter the name of your recipe" label="name" onChange = {(event) => this.setState({name: event.target.value})}/>
<Button color="secondary" onClick={(event) => this.handleCreate(event)}>Submit Recipe</Button>

Answer 1

又是我 - 我不知道为什么它是挂起的，但我修复了 CREATE 配方，INSERT 语句。

在 api/index.js 中，这就是数据对象的样子。如果您查看 console.log(req.user) - 您会注意到它发送的是 ID，而不是 req.user 中的 user_id - 因此我们不得不说 Foreign键 user_id 是来自用户的 id。

const data = {
  user_id: req.user.id,
  recipe_name: req.body.name,
  recipe_meal: req.body.meal,
  recipe_author: req.body.author,
  recipe_description: req.body.description,
  recipe_ingredients: req.body.ingredients,
  recipe_preparation: req.body.preparation
}

也改变这个：

来自::

db.query('SELECT * FROM recipes', (err, rows) => {

收件人::

db.query('SELECT * FROM recipes WHERE user_id = ? ', [req.user.user_id], (err, 
rows) => {

我还添加了一个页面重新加载，成功时 (200)。

if (response.status === 200) {
          console.log("Post Success");
          window.location.reload();
        }

尝试在 table 中创建新条目时网络中的待处理状态

Pending Status in Network when trying to Create new entry in table

express

jwt

reactjs

passport.js

axios