错误：端点上不存在列“未定义”

Question

I am running express js with postgresql and trying to hit one of my endpoints to update one of my columns on my products table. Everytime I click "ADD TO CART" it triggers a function which should then change the value of in_Cart to true, but for some reason on the first click i get the error above, but then on the second click it actually works? Could anyone give me an explanation or soloution to why? Here is my endpoint code:

//Update inCart in product
app.put("/carts/:id/inCart", async (req, res) => {
  try {
    const { id } = req.params;
    const { in_cart } = req.body;

    const updateString = `in_cart = ${in_cart}`;

    const updateProduct = await pool.query("UPDATE products SET " +updateString+ " WHERE id = $1", [id]);

    res.json("Successfully Updated in_Cart");
  } catch (err) {
    console.log(err);
  }
})

and here is my javascript page that hits the endpoint:

import React, { Component, useEffect, useState } from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams
} from "react-router-dom";
import "./ProductPageBody.scss";

const ProductPageBody = () => {
  const [products, setProducts] = useState([]);

  let { shirtName } = useParams();
  let shirts = products.filter(product => product.name === shirtName);

  const [in_cart, set_in_cart] = useState(shirts.in_cart);
  
  useEffect(() => {
    getProducts();
  }, []);

  const getProducts = async () => {
    try {
      const response = await fetch("http://localhost:5000/carts/");
      const jsonData = await response.json();

      setProducts(jsonData);
    } catch (err) {
      console.error(err.message);
    }
  };

  //Update in_cart Function
  const updateInCart = async (e, shirt) => {
    try {
      set_in_cart(true);
      const body = { in_cart };
      // ${shirts.id}
      const response = await fetch(`http://localhost:5000/carts/${shirt.id}/inCart`, {
        method: "PUT",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify(body)
      })
      console.log(response);

    } catch (err) 
    {
      console.error(err.message)  
    }
  } 
  return (
    <div
      className="container-fluid mt-5 m-auto p-0"
      style={{ paddingTop: "74px" }}
    >
      {shirts.map((shirt) => (
        <div className="row" key={shirt.id}>
          <div className="col-md-12 col-lg-4 ml-auto">
            <img
              src={shirt.image}
              alt={shirt.name}
              className="img-responsive w-100"
            />
          </div>

          <div className="col-md-12 col-lg-3 h-25 mt-5 mr-auto">
            <h1>{shirt.name}</h1>
            <div className="Pricing mt-3 mb-5">
              <h3 className="text-danger float-left mr-4">
                ${shirt.price}
              </h3>
              <select className="buttons form-control float-left mb-2">
                <option>Small</option>
                <option>Medium</option>
                <option>Large</option>
              </select>
              <button
                type="button"
                className="buttons btn btn-danger mt-2 h-auto w-100"
                onClick={e => updateInCart(e, shirt)}
              >
                ADD TO CART
              </button>
            </div>

            <p>{shirt.description}</p>
            <ul className="mt-2">
              <li>{"95% polyester, 5% elastane (fabric composition may vary by 1%)"}</li>
              <li>{"95% polyester, 5% elastane (fabric composition may vary by 1%)"}</li>
            </ul>
          </div>
        </div>
        ))}
    </div>
  );
};

export default ProductPageBody;

Thank You!

Answer 1

Maybe your body is getting passed as undefined to your endpoint.
One of the reasons for this is you are doing set_in_cart inside updateInCart . and set_in_cart call is async so you will not get in_cart s value immediately after the call to set_in_cart .
Instead, you might get undefined or initial value or previous value, and on the second click, you will get the value of in_cart which is set on the previous click.
To avoid this you can directly use in_cart that is true value and then set it into the state.
setState is asynchronous - Why is setState in reactjs Async instead of Sync?