React开发电话本App：新增重复用户时如何获取对应ID更新号码

核心逻辑是从你本地已存储的全量联系人列表中匹配重复姓名的条目，直接读取该条目的ID即可，具体实现步骤如下：

• 首先在addName函数执行新增逻辑前，先做重复姓名校验
  假设你从服务端拉取的所有联系人数据存在persons这个state中，直接用Array.find方法匹配和输入姓名一致的条目：

  const addName = (e) => {
    e.preventDefault();
    // 表单输入的姓名、号码，替换为你实际绑定的state变量名
    const inputName = nameInput;
    const inputNumber = numberInput;
  
    // 匹配已存在的同姓名条目，建议统一大小写避免校验遗漏
    const existedContact = persons.find(
      item => item.name.toLowerCase() === inputName.toLowerCase()
    );
  
    // 存在同姓名条目时走更新逻辑
    if (existedContact) {
      const confirmUpdate = window.confirm(`${inputName} 已存在，是否替换为新号码？`);
      if (confirmUpdate) {
        // 直接从匹配到的existedContact中获取id，调用你已有的更新方法
        changeNumberOf(existedContact.id, inputNumber);
      }
      // 重置表单后终止执行，不走后续新增逻辑
      nameInput = '';
      numberInput = '';
      return;
    }
  
    // 原有新增联系人的逻辑
    // ...
  }
  

• 特殊场景适配：如果你的联系人是分页加载，本地没有全量数据，可先调用后端的姓名查询接口，把输入的姓名传给后端查询对应条目ID，拿到返回的ID后再调用changeNumberOf方法即可
• 额外优化建议：更新请求成功后，记得同步修改本地persons数组中对应条目的号码，保证页面展示数据和服务端一致

内容的提问来源于stack exchange，提问作者paul allen