How to replace an object in an array of object?-CodePudding

Iam working on React.js. I have an array of objects clientList. I am trying to update the function of creating a new client with the option to update an existing client object present in ClientList and replace it with the new data entered by the user. I cant figure out how to do it. I tried to map on the clientList and find if the username entered by the user is similar to the one present in one of the objects in theClientList array then replace it with the newClientcreated . It works for the first index but for the following ones it only copies the same object each time it finds similar user value.

Here is my code :

function App() {
  const [user, setUser] = useState([]);
  const [pwd, setPwd] = useState();
  const [currentClient, setcurrentClient] = useState();
  const [clientList, setClientList] = useState([]);

//function to add and update client

  const addClient = (idNum, user, password, money) => {

    const newClient = new Client(idNum, user, password, money);

    setcurrentClient(newClient);

    setClientList([...clientList, newClient]);

    console.log(currentClient);
    console.log(clientList);

    const result = clientList.map((obj, i) =>
      obj.username === user ? newClient : obj
    );
    console.log(result);

Here is the result I got:

(3) [Client, Client, Client]
0: Client {purchaseList: Array(1), id: '123456788', username: 'aaaa a', password: 'Aaaa', moneyAmount: '3'}
1: Client {purchaseList: Array(1), id: '123456788', username: 'aaaa a', password: 'Aaaa', moneyAmount: '3'}
2: Client {purchaseList: Array(1), id: '123456788', username: 'aaaa a', password: 'Aaaa', moneyAmount: '3'}
length: 3

I would have expected that the 3 times I tried to update the object that has username 'aaaa a', it would have updated my array with only the object created. But instead it saves 3 times the same object with username 'aaaa a' with the last object values entered.

CodePudding user response：

You are adding the client to the client list by calling setClientList and then you are doing some operation afterwards -- but at that point, it's too late. You need to make an active choice on if to add it to the list of replace it before setting it.

  const addClient = (idNum, user, password, money) => {

    const newClient = new Client(idNum, user, password, money);

    setcurrentClient(newClient);

    setClientList((prevClientList) => {
       if (prevClientList.some((obj) => obj.id === idNum)) { // This checks if an entry with the same ID already exists
           // If it does, return a map with the matched item replaced
           return prevClientList.map((obj) =>
              obj.id === idNum ? newClient : obj
           );
       }

       
       // If it doesn't add it to the list
       return [...prevClientList, newClient]
    });

By the way, as used above, you should use the callback form of the state setter when deriving a new value from its current value, to prevent bugs that can happen in regard to stale data in React.

Additionally, probably better to use the ID as the thing to check against as typically slightly stronger guarantees than username.