使用 Axios PUT 请求从具有多个对象的数组更新数据

Question

I need to update data in an array that has multiple objects where a user will input a new balance that will update the old balance state. The array consists of a company name with an array called details, and that array holds objects containing employee information(name, balance, notes), for this question I am just using notes to simplify things. I am using Axios PUT to access the id of the nested object, I get the id from a Link that is passed via useParams hook.

My issue is in the Axios PUT request. Before I had a schema that was just a data object (no arrays were in it) and the PUT req was working fine. Then I needed to change the schema to an array with multiple objects and now I cannot seem to update the data. I am able to target the data through the console log but when I take that code from the console and apply it, the state still doesn't change. Even in Postman, the only way for me to successfully update is to get the Shema from a GET request and paste that schema in the PUT request and change some data in it, then I hit send and it updates, but to get it to update again I need to hit send twice (this shouldn't be, no? ).

I am able to access the data and render it in other components by mapping it twice as shown below: setBalance(res.data.data.details.map((r) => r.balance));

My question: How can I edit the below code to update the state correctly? setNotes([...details, res.data.data.details.map((r) => r.notes )]);

However, I am really struggling with how to do this in the Axios PUT request.

Here is my code:

import React, { useState } from "react";
import { useHistory } from "react-router-dom";
import { useParams } from "react-router-dom";
import axios from "axios";

const AddForm = () => {
  const [newBalance, setNewBalance] = useState("");
  const [details, setDetails] = useState([]);
  const [notes, setNotes] = useState("");
  const [total, setTotal] = useState("");
  const { id } = useParams();
  const history = useHistory();

  //update balance
  const updateBal = () => {
  // function to calculate balance
  };

  const updateBalHandler = (e) => {
    e.preventDefault();
    axios({
      method: "PUT",
      url: `http://localhost:5000/update-snapshot-test/${id}`,
      data: { 
              balance: total
              notes: notes 
            },
    }).then((res) => {
      history.push(`/success/` + id);
      setNotes([...details, res.data.data.details.map((r) => r.notes )]); //this code isolates the notes state but does not update it
    });
  };

  return (
    <form
      action="/update-snapshot/:id"
      method="post"
      onSubmit={updateBalHandler}
    >
        <Input
          setInputValue={setNewBalance}
          inputValue={newBalance}
          inputType={"number"}
        />

        <Input
          setInputValue={setTotal}
          inputValue={total}
          inputType={"number"}
        />

        <TextArea
         setInputValue={setNotes}
         inputValue={notes}
         inputType={"text"}
        />

        <Button onClick={() => { updateBal(); }} >
        Update
       </Button>

        <Button type="submit">
         Save
        </Button>

    </form>
  );
};
export default AddForm;

Here is my data structure from Mongo DB

{
    "message": "Post found",
    "data": {
        "company": "Riteaid",
        "_id": "1",
        "details": [
            {
                "employee": "jane doe",
                "balance": "3",
                "notes": "some notes",
                "_id": "2"
            },
            {
                "employee": "john doe",
                "balance": "1",
                "notes": "some more notes",
                "_id": "3"
            }
        ],
    }
}

Answer 1

You have the id, so you have to search for the relevant object, update it and pass it to the setNotes() setter.

let localNotes = res.data.data.details.map((responseDetail) => {
    if (detail._id === id){
        let newNotes = [...responseDetail.notes, ...details];
        return {
            ...responseDetail,
            notes: newNotes
        };
    }
    return responseDetail;
});
if (localNotes.length){
    setNotes(localNotes);
}

Does this solve your problem?

Answer 2

The answer was in the backend, the front end was fine, the code did not need any of the additions, it should just be:

const addBalHandler = (e) => {
    e.preventDefault();
    axios({
      method: "PUT",
      url: `http://localhost:5000/endpoint${id}`,
      data: {
        balance: total,
        notes: notes,
        date: date,
      },
    }).then((res) => {
      history.push(`/success/` + id);
      console.log(res.data);
    });
  };