React+Redux商品更新功能前端失效但Postman可正常调用API问题求助

Hey there! Let's walk through the issues in your code step by step since Postman works fine—so the problem's definitely on the frontend side.

1. Missing payload in your API update call #

Looking at your updateProduct function in Redux, you're not passing the updated product data to the PUT request! Right now it's:

const res = await userRequest.put(`/products/${id}`);

But you need to send the product (which is the inputs from your component) as the second argument. Fix it like this:

const res = await userRequest.put(`/products/${id}`, product);

Without this, your backend isn't getting any updated fields to save—so no changes happen at all.

2. Incorrect form submission handling #

In your Product component's update button, the onClick handler is written wrong:

<button className="productButton" onClick={(e)=>handleUpdate(e.preventDefault())}>Update</button>

This is calling e.preventDefault() immediately and passing its return value (which is undefined) to handleUpdate. Instead, you need to first prevent the default form submission behavior, then call handleUpdate:

<button className="productButton" onClick={(e) => {
  e.preventDefault();
  handleUpdate();
}}>Update</button>

If you don't fix this, the page will refresh when you click the button, which might make it look like nothing happened even if the API call worked.

3. Initialize inputs with product's current values #

Right now your inputs state starts as an empty object:

const [inputs, setInputs]=useState({})

This means if the user only updates one field (like title), the other fields won't be included in the PUT request. It's better to initialize the state with the existing product data so the form shows the current values, and all fields are sent if needed. Update it to:

const [inputs, setInputs]=useState({
  title: product.title,
  desc: product.desc,
  price: product.price.toString(), // Convert number to string for input
  inStock: product.inStock.toString() // Match select's string values ("true"/"false")
})

This way, the form pre-fills with the current product info, and even if the user doesn't change a field, it's still sent in the request.

4. Convert data back to correct types #

Since your input for price returns a string and the select returns string values for inStock, you need to convert these back to match your Mongoose model's expected types (number for price, boolean for inStock) before sending the request. Modify your handleUpdate function:

const handleUpdate=async()=>{
  const updatedInputs = {
    ...inputs,
    price: Number(inputs.price),
    inStock: inputs.inStock === "true" // Convert string back to boolean
  }
  await updateProduct(productId, updatedInputs , dispatch)
}

This ensures the data sent to the backend matches what your model expects, preventing unexpected save issues.

5. Add loading check for product data #

When the component first mounts, product might be undefined (since Redux fetches products asynchronously). Add a check to avoid errors:

if (!product) return <div>Loading...</div>;

Put this right after getting product from the selector to prevent crashes when trying to access product._id or other properties before the data loads.

After applying these fixes, your product update functionality should work just like it does in Postman!

内容的提问来源于stack exchange，提问作者Adnan Ahmad