React简易电话本输入后联系人空白及退格不恢复问题解析

问题背景 #

实现React简易电话本搜索功能时遇到两个问题：

1. 输入框输入任意内容后，联系人列表全部空白
2. 退格输入框字符时，列表无法恢复到匹配退格后字符的联系人

原问题代码（搜索组件）：

import React, {useState} from 'react';

const Search = ({persons, setPersons}) => {
    const [filter, setFilter] = useState('');

    const handleFilterEntry = (event) => {
        const value = event.target.value;
        setFilter(value);
        const filteredPersons = persons.filter( person => {
            person.name.toLowerCase().includes(value.toLowerCase())
        });
        setPersons(filteredPersons);
        console.log(value);
    }
    return (
        <div>
            Filter names with: <input value = {filter} onChange={handleFilterEntry}/>
        </div>
    )
}

export default Search;

修复后的handleFilterEntry函数：

const handleFilterEntry = (event) => {
    const value = event.target.value;
    setFilter(value);

    const filteredPersons = value
        ? persons.filter(
            (person) =>
                person.name.toLowerCase().includes(value.toLowerCase())
        )
        : persons;

    setPersons(filteredPersons);
    console.log(value);
};

问题1：为什么添加条件逻辑能解决联系人空白的问题？ #

原代码的filter回调函数存在关键错误：使用花括号{}包裹逻辑，但没有写return语句。在JavaScript中，带花括号的箭头函数不会自动返回值，所以每次判断person.name.toLowerCase().includes(value.toLowerCase())后，都返回undefined——而filter会把返回值为假（undefined被视为假）的项全部过滤掉，最终filteredPersons是空数组，调用setPersons后联系人列表就会空白。

修复代码的条件逻辑做了两件事：

• 当value不为空时，执行过滤逻辑，用括号替代花括号让箭头函数自动返回判断结果，确保过滤逻辑有正确的返回值
• 当value为空时，直接返回原始的persons数组，避免空输入时出现空白列表

其实哪怕不加这个条件，只要给原代码的filter回调补上return，也能解决输入时的空白问题，但条件逻辑补上了空输入场景的处理，让功能更完整。

问题2：退格后列表无法恢复的原因是什么？ #

核心问题是你每次过滤后，都用setPersons把原始联系人数据覆盖成了过滤后的结果。举个具体流程：

1. 初始persons是["Joe", "Jack"]
2. 输入J，过滤出["Joe", "Jack"]，调用setPersons后，persons变成这个过滤后的数组
3. 输入Jo，基于当前的persons（["Joe", "Jack"]）过滤出["Joe"]，setPersons后persons变成["Joe"]
4. 退格回J时，此时的persons已经是["Joe"]了，再过滤J自然只能得到["Joe"]，原始的Jack已经被覆盖丢失

解决方法是不要直接修改原始联系人状态，而是在组件中保留一份原始数据的副本：比如在父组件里维护原始联系人数据和过滤后联系人数据两个状态，每次过滤都基于原始数据，而非当前的persons。示例父组件逻辑：

// 父组件示例
const [originalPersons, setOriginalPersons] = useState([]); // 存储从db.json加载的原始数据
const [filteredPersons, setFilteredPersons] = useState([]); // 存储过滤后的数据

// 加载数据后同时初始化两个状态
useEffect(() => {
  fetch('/db.json')
    .then(res => res.json())
    .then(data => {
      setOriginalPersons(data.persons);
      setFilteredPersons(data.persons);
    });
}, []);

// 搜索组件传入原始数据和修改过滤后数据的方法
<Search persons={originalPersons} setPersons={setFilteredPersons} />

这样每次过滤都基于原始的originalPersons，退格时就能正确恢复匹配的联系人。

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