如何实现InputSearch任务搜索组件并修复首字母搜索失效问题

问题根源分析 #

你当前的核心问题出在isTaskListEmpty的逻辑设计上：

1. 用toggle取反的方式更新这个状态完全不符合搜索需求，初始状态为false，第一次输入时状态会被切换为true，导致渲染全部任务而非过滤结果；第二次输入时状态切回false，才会渲染过滤后的内容，这就是首字母输入无反应的直接原因。
2. 渲染分支里多余的二次过滤（用input.value再次过滤filteredTasks）完全无效，input是绑定添加任务输入框的实例，和搜索功能无关，会干扰搜索结果展示。

具体修复步骤 #

1. 移除不必要的isTaskListEmpty状态

这个变量的存在完全是逻辑冗余，我们可以直接通过searchTerm和filteredTasks实现需求。

2. 简化handleInputChange函数

只需要专注更新搜索关键词，去掉多余的状态切换：

const handleInputChange = (value) => {
  setSearchTerm(value);
};

3. 重构渲染逻辑

直接渲染filteredTasks即可——当searchTerm为空时，空字符串会匹配所有任务标题，filter方法会返回全部任务，无需分支判断：

return (
  <div>
    <InputTask addTask={handleAddTask} />
    <InputSearch onInputChange={handleInputChange} />
    <HeaderOfTaskList />
    <ul>
      {filteredTasks.map((task) => (
        <Task
          task={task}
          key={task.id}
          onDelete={() => handleDelete(task.id)}
        />
      ))}
    </ul>
  </div>
);

可选优化：空结果提示 #

如果需要在搜索无匹配时显示提示文本，可以基于filteredTasks的长度判断：

return (
  <div>
    <InputTask addTask={handleAddTask} />
    <InputSearch onInputChange={handleInputChange} />
    <HeaderOfTaskList />
    {filteredTasks.length > 0 ? (
      <ul>
        {filteredTasks.map((task) => (
          <Task
            task={task}
            key={task.id}
            onDelete={() => handleDelete(task.id)}
          />
        ))}
      </ul>
    ) : (
      <p>没有匹配的任务</p>
    )}
  </div>
);

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