Question

如何替换对象数组中的对象？

2023-01-07

78

javascript reactjs arrays object

我正在研究 React.js。我有一个对象数组 clientList 。我正在尝试更新创建新客户端的功能，并选择更新 ClientList 中现有的客户端对象并将其替换为用户输入的新数据。我不知道该怎么做。我尝试在 clientList 上进行映射，并查找用户输入的用户名是否与 ClientList 数组中某个对象中的用户名相似，然后将其替换为 newClient created 。它适用于第一个索引，但对于后续索引，它每次找到相似的用户值时仅复制相同的对象。

这是我的代码：

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);

这是我得到的结果：

(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

我原本以为，当我尝试更新用户名为“aaaa a”的对象 3 次时，它会仅使用创建的对象更新我的数组。但相反，它使用最后输入的对象值保存了用户名为“aaaa a”的相同对象 3 次。

Answer 1

您通过调用 setClientList 将客户端添加到客户端列表中，然后执行一些操作 - 但此时，为时已晚。您需要在设置它之前主动选择是否将其添加到替换列表中。

  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]
    });

顺便说一句，如上所述，在从当前值派生新值时，您应该使用状态设置器的回调形式，以防止在 React 中与陈旧数据相关的错误发生。

此外，最好使用 ID 作为检查对象，因为它通常比用户名更有力。

Answer 2

这是我之前说过的另一种方法。您可以使用临时变量并对其进行操作。

const addClient = (idNum, user, password, money) => {
    const newClient = new Client(idNum, user, password, money);
    setcurrentClient(newClient);
    let temp = [...clientList]
    if (temp.some((obj) => obj.idNum === idNum)) {
      temp = temp.map((obj) =>
        obj.idNum === idNum ? newClient : obj
      );
      setClientList(temp)
    }
    else {
      setClientList([...clientList, newClient])
    }
}