Когда я добавляю более одного элемента в массив стека MERN, идентификатор res. json ._ остается одинаковым только для обоих элементов в переднем конце

Question

Я строю стек MERN, используя Информированный в качестве формы и Карты Material-ui для отображения данных. Когда я отправляю форму в первый раз, все отлично, элемент добавляется в базу данных и добавляется в основной массив в React для отображения данных, а бэкэнд отправляет res. json ._ id, как видно здесь для использования в качестве идентификатора.

Однако, когда я добавляю второй элемент, он использует тот же json ._ id и изменяет как первый элемент, так и второй элемент в массиве, как показано здесь . Затем, когда я добавляю третий элемент, он не влияет на первый элемент, но теперь показывает 4 карты, хотя в массиве только 3 элемента, как видно здесь . Когда я обновляю sh страницу и она получает элементы с сервера / базы данных, все происходит так, как должно быть здесь . Это imgur альбом всех предыдущих изображений , код ниже.

Серверный код

app.post("/express_backend/add", (req, res, next) => {

  let wine = new Wines({
    vinyard: req.body.vinyard,
    name: req.body.name,
    grape: req.body.grape,
    grapes: req.body.grapes,
    year: req.body.year,
    place: req.body.place,
    area: req.body.area,
    country: req.body.country,
    appellation: req.body.appellation,
    description: req.body.description,
    funfact: req.body.funfact,
    timestamp: Date.now(),
    price: req.body.price,
    mise: req.body.mise,
    lastUpdated: Date.now(),

    color: req.body.color,
    status: req.body.status,
    picture: req.body.picture
  });
  wine.save((err, newWine) => {
    if (err) return next(err);
    res.json({ updated: 0, _id: newWine._id });
  })
});

Внешний код React

handleSubmit =(e)=> {
    let name = e.name
    let newItem = e

    fetch(`http://localhost:5000/express_backend/add?=${name}`, {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      },
      body: JSON.stringify(newItem)
    })
      .then(res => {
        if (res.ok) {
          return res.json();
        } else {
          throw Error(`Request rejected with status ${res.status}`);
        }
      })

      .then(json => {
          newItem._id = json._id
          console.log(json)
          this.setState(state=>{
            const glasses = [...state.glasses, newItem]
            return{
              glasses,newItem:''
            }
          })

      })
      .catch(error => {
        console.log("this is your error" + error);
      });
  };

A несколько дополнительных заметок;

Я пробовал разные способы добавления элементов в массив, включая array.pu sh () и array.unshift (). У меня изначально было такое, что, что бы ни печатало в форме, меняло состояние curItem (используя onChange), и когда оно было отправлено, оно либо обновляло элемент, если у него уже был идентификатор, либо добавляло его в массив, если этого не было. Причина, по которой я ушел от этого, состоит в том, что это было очень медленно, однако это работало.

.then(json => {
        let glassesArray;
        if (!newWine._id) {
          glassesArray = this.state.glasses;

          newWine._id = json._id;
          glassesArray.push(newWine);
          this.setState({ glasses: glassesArray });
        } else {
          glassesArray = this.state.glasses.map(item => {
            if (item._id === newWine._id) {
              item = newWine;
            }
            return item;
          });
        }
        this.setState({ glasses: glassesArray });
      });