Почему я не могу сначала определить объект, а затем отправить его как тело в почтовых запросах?(React)

Question

Я пытаюсь выполнить простой POST-запрос, используя метод React fetch (), но когда я пытаюсь добавить свой объект данных в тело этого запроса, он становится неопределенным, когда он поступает в мою основанную на экспрессе серверную часть (и да, я уже использую body-parser и т. д.).

Однако, если я вместо этого определяю тело непосредственно в методе fetch (), добавляя свойства вручную, оно неожиданно работает так, как я хочу.

Это на стороне клиента:

addProduct = (event) => {
    event.preventDefault();

    const data = {
        namn: this.state.curNamn,
        lagersaldo: this.state.curSaldo,
        plats: this.state.curPlats
    }

    if (this.checkEmptyValues(data)) {
        alert("Please fill in all the fields");
        return;
    }  

    fetch('http://localhost:3001/addproduct', {
        method: 'POST',
        headers: {'Content-Type':'application/json'},
        body: JSON.stringify({data})
    })
    .then(res => this.resolveRes(res))  
    .catch((err) => console.log(err))
}

И на стороне сервера:

app.post('/addproduct', (req, res) => {

let data = {
    namn: req.body.namn,
    lagersaldo: req.body.lagersaldo,
    plats: req.body.plats
};

let sql = 'INSERT INTO produkter SET ?';
db.query(sql, data, (err, result) => {
    if (err) throw err;
    res.send(result);
});

});

Так что приведенный выше код дает мне 'ER_BAD_NULL_ERROR', так как свойстватело не определено, когда оно прибывает на стороне сервера, но если бы я изменил код на это, оно работает:

addProduct = (event) => {
    event.preventDefault();

    if (this.checkEmptyValues(data)) {
        alert("Please fill in all the fields");
        return;
    }  

    fetch('http://localhost:3001/addproduct', {
        method: 'POST',
        headers: {'Content-Type':'application/json'},
        body: JSON.stringify({
           namn: this.state.curNamn,
           lagersaldo: this.state.curSaldo,
           plats: this.state.curPlats
        })
     })
    .then(res => this.resolveRes(res))  
    .catch((err) => console.log(err))
}

Почему это?Почему я не могу просто определить и создать объект, который я хочу сначала отправить, а затем просто отправить этот объект в теле?

Answer 1

Вы отправляете данные в другом объекте здесь:

fetch('http://localhost:3001/addproduct', {
    method: 'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify({data})
})

Вы должны распространять данные, если вам нужно что-то добавить

fetch('http://localhost:3001/addproduct', {
    method: 'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify({
      ...data,
      newFixValue: true
    })
})

или просто отправлять данные следующим образом:

fetch('http://localhost:3001/addproduct', {
    method: 'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify(data)
})

Answer 2

Вы помещаете свои данные в другой объект

JSON.stringify({data})
// This gets stringified to:
{
  data: {
    namn: ...,
    lagersaldo: ...,
    plats: ...
  }
}

Замените на:

JSON.stringify(data)
//Stringifies to:
{
  namn: ...,
  lagersaldo: ...,
  plats: ...
}