React中使用useState实现搜索筛选时出现未使用变量错误

错误原因分析 #

你遇到的'InputEvent' is assigned a value but never used错误，核心是App组件结构逻辑混乱：你把组件的JSX返回写在了InputEvent事件处理函数内部，导致App组件本身没有返回任何可渲染内容，同时事件处理函数职责被错误放大，过滤渲染逻辑不应放在事件回调里。此外，过滤逻辑还存在依赖异步状态、索引使用不当的问题。

修正后的代码 #

App组件

import "./App.css";
import Header from "./Header";
import Robo from "./Robo";
import { robots } from "./robots";
import { useState } from "react";

function App() {
  const [query, setQuery] = useState("");

  // 仅负责更新搜索关键词状态
  const InputEvent = (e) => {
    const data = e.target.value;
    setQuery(data);
  };

  // 基于当前query计算过滤后的机器人列表
  const filteredRobots = robots
    .filter((curElem) => 
      curElem.name.toLowerCase().includes(query.toLowerCase())
    )
    .map((curElem) => (
      <Robo
        key={curElem.id}
        id={curElem.id}
        name={curElem.name}
        email={curElem.email}
      />
    ));

  // 组件返回放在最外层，正常渲染UI
  return (
    <div className="App">
      <Header query={query} InputEvent={InputEvent} />
      <div className="robo-friends-container">{filteredRobots}</div>
    </div>
  );
}

export default App;

Header组件（无需修改）

import React from "react";
import "./header.css";

const Header = ({ query, InputEvent }) => {
  return (
    <>
      <div className="headerText">ROBO FRIENDS</div>
      <div>
        <input
          type="text"
          id="lname"
          name="lname"
          placeholder="Search"
          value={query}
          onChange={InputEvent}
        />
      </div>
    </>
  );
};

export default Header;

关键修改点 #

1. 组件结构修正：将App组件的JSX返回移到函数最外层，让InputEvent仅负责更新搜索状态，恢复组件正常渲染流程。
2. 过滤逻辑优化：
   • 使用filter回调的curElem直接访问当前机器人数据，避免通过索引robots[index]的冗余操作。
   • 统一转为小写字母，实现不区分大小写的搜索匹配。
3. 状态依赖修正：搜索过滤逻辑基于最新的query状态在组件渲染时计算，避免依赖异步更新的状态值。

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