reactjs React Router教程v6.6.2 --数据更新功能未按预期运行

31moq8wy 于 2023-01-12 发布在 React

关注(0)|答案(1)|浏览(106)

我正在学习网络开发。最近我一直在学习React Router，我很兴奋即将构建我的第一个全栈（MERN）应用程序！本教程是构建一个基本的联系人应用程序。
我对tutorial中一个用来更新联系人数据的函数感到困惑。下面是教程中调用该函数的部分。下面是包含相关问题函数的模块（为简洁起见，删除了其他函数）：

import localforage from "localforage";
import { matchSorter } from "match-sorter";
import sortBy from "sort-by";

export async function updateContact(id, updates) {
  await fakeNetwork();
  let contacts = await localforage.getItem("contacts");
  let contact = contacts.find(contact => contact.id === id);
  if (!contact) throw new Error("No contact found for", id);
  Object.assign(contact, updates);
  await set(contacts);
  return contact;
}

function set(contacts) {
  return localforage.setItem("contacts", contacts);
}

updateContact函数对我来说不起作用，因为我没有看到contacts变量（一个对象数组）用更新后的联系人对象更新的地方，也没有看到contacts对象的更新版本被持久化到本地存储中，只有看起来是相同的未变异/未更新的联系人对象。但我不明白这段代码是怎么做到的。
如果需要更多的上下文，请让我知道...我不认为我可以添加太多额外的代码片段，因为它认为这是垃圾邮件？
我已经浏览了React Router的文档，但是我没有看到文档中的任何东西可以解释我所看到的东西，在函数中使用console.log只会让我更加困惑。
任何帮助都是赞赏指出我可能错过了什么！

reactjs

来源：https://stackoverflow.com/questions/75089892/react-router-tutorial-v6-6-2-data-updating-function-not-behaving-as-expected

1条答案

按热度按时间

kx5bkwkv1#

此代码正在变更对象引用。Object.assign(contact, updates);将updates中的对象“合并”到contact对象中，该对象是对contacts数组中对象的引用。
Object.assign()静态方法将所有可枚举的自有属性从一个或多个 *source object * 复制到 target object。它返回修改后的目标对象。
语法为Object.assign(target, ...sources)。有关详细信息，请参见Object.assign。
一旦找到特定的contact对象，它就会发生变化，更新后的数据会持久化到localStorage中。

export async function updateContact(id, updates) {
  await fakeNetwork();
  let contacts = await localforage.getItem("contacts");

  // contact is reference to object in contacts
  let contact = contacts.find(contact => contact.id === id);

  if (!contact) throw new Error("No contact found for", id);

  // mutate the contact object
  Object.assign(contact, updates);

  // persist updated data back to localStorage
  await set(contacts);

  return contact;
}

更熟悉的“React-y”方式可能如下所示：

export async function updateContact(id, updates) {
  await fakeNetwork();
  const contacts = await localforage.getItem("contacts");
  const contact = contacts.find(contact => contact.id === id);

  if (!contact) {
    throw new Error("No contact found for", id);
  }

  const newContacts = contacts.map(contact => contact.id === id
    ? { ...contact, ...updates } // <-- create new object reference and merge
    : contact
  );

  await set(newContacts);
  return contact;
}

赞(0）回复(0）举报 2023-01-12

我来回答

reactjs React Router教程v6.6.2 --数据更新功能未按预期运行

1条答案

相关问题

热门标签

最新问答