React Hook问题：useEffect数组处理报错、setNewName无法更新状态

useEffect执行中断与toLowerCase报错问题 #

• 错误根因1：依赖数组配置错误
  该effect的作用是基于人员列表、搜索关键词计算过滤结果，依赖项本该是person和searchTerm，但代码中错误把filteredPerson加入依赖列表，形成无限闭环：effect执行后调用setFilteredPerson更新状态 → 触发filteredPerson变化 → 重新执行effect → 再次调用setFilteredPerson，循环往复。
• 错误根因2：初始值结构不匹配
  filteredPerson的初始值被设置为['']，也就是数组内嵌空字符串，和预期存储人员对象的数组结构完全不一致，进一步提升渲染异常概率。
• 触发表现：
  无限循环会触发React的最大更新深度拦截，强制中断当前渲染流程，此时获取到的person状态并非完整的对象数组（可能存在元素为非对象类型的异常值），调用p.name.toLowerCase()时就会抛出“无法读取属性toLowerCase”的错误。因为流程被强制中断，后续的数组处理逻辑无法正常执行，就算移除toLowerCase方法，异常的状态值依然会导致逻辑停摆。
• 修复代码：
  修正effect的依赖数组，增加空值兼容：

  useEffect(() => {
    const results = person.filter(p => 
      // 可选链兼容异常数据，避免属性读取报错
      p?.name?.toLowerCase().includes(searchTerm.toLowerCase())
    )
    setFilteredPerson(results)
  }, [person, searchTerm]) // 移除错误加入的filteredPerson依赖，补充正确的searchTerm依赖
  

  修正filteredPerson的初始值：

  const [filteredPerson, setFilteredPerson] = useState([])
  

setNewName状态重置失效问题 #

• 错误根因1：
  上述useEffect的无限循环触发React渲染中断后，组件的状态更新队列会被直接丢弃，中断点之后的所有状态更新调用（包括尝试在.then回调、分支内外任意位置调用的setNewName）都不会被应用到组件上，表现为状态修改完全不生效。
• 错误根因2：
  尝试的setNewName(...newName, {name: '', number: ''})写法本身存在语法错误。React的状态更新函数仅接收1个参数：要么是新的状态值，要么是返回新状态的更新函数，将对象展开为多参数传入的写法根本无法触发状态更新。
• 补充修复优化：
  等上述useEffect的循环问题修复后，需要调整addName中更新人员列表的写法，避免闭包读取旧状态的问题：

  // 原代码：setPerson(person.concat(returnedPerson))
  // 改为函数式更新，确保拿到最新的人员列表
  setPerson(prevPersons => prevPersons.concat(returnedPerson))
  

  保留.then回调中原有的重置逻辑即可：setNewName({name: '', number: ''})，修复循环问题后该逻辑会正常生效，完成表单清空。

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