React 中的搜索过滤器在尝试使用 state 挂钩时出错

Question

• I am try to add search feature to an existing lists of robot names.
• In order to do so I am trying to useState hooks. I have an App component and Header component which has the input tag for search field.
• Error I am getting is 'InputEvent' is assigned a value but never used. Below is the code for App component (main component).

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);

    const extraction = robots
      .filter((curElem, index) =>
        robots[index].name.toLowerCase().includes(query)
      )
      .map((curElem, index) => {
        return (
          <Robo
            key={robots[index].id}
            id={robots[index].id}
            name={robots[index].name}
            email={robots[index].email}
          />
        );
      });
    return (
      <div className="App">
        <Header query={query} InputEvent={InputEvent} />
        <div className="robo-friends-container">{extraction};</div>
      </div>
    );
  };
}
export default App;

Child component

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;

Answer 1

Here is my answer in stackblitz app

https://stackblitz.com/edit/stackoverflow-robots-filter?file=App.tsx,Robo.tsx,Header.tsx,robots.ts

I have altered the code a bit.. you can fork the project and play with it..

You can add debounce option to your input, which prevents unwanted re-renders

Adding the changes:

function App() {
  const [query, setQuery] = useState(undefined);
  const [filteredRobots, setFilteredRobots] = useState([]);

  useEffect(() => {
    console.log(query);

    const filteredRobots = robots.filter((robot) => {
      return robot.name.includes(query);
    });

    if (filteredRobots.length) {
      setFilteredRobots(filteredRobots);
    }
  }, [query]);

  const onQueryChange = (e) => {
    const data = e.target.value;
    setQuery(data);
  };

  const renderRobots = () => {
    if (!query || !query.length) {
      return <p>{'Search to find Robots'}</p>;
    }

    if (filteredRobots && filteredRobots.length && query && query.length) {
      return filteredRobots.map((filteredRobot) => (
        <Robo
          key={filteredRobot.id} //id is unique key in your data
          name={filteredRobot.name}
          id={filteredRobot.id}
          email={filteredRobot.email}
        />
      ));
    }

    return <p>{'No Robots Found'}</p>;
  };

  return (
    <div className="App">
      <Header query={query} InputEvent={onQueryChange} />
      {renderRobots()}
    </div>
  );
}

Problems in your code:

1. Const InputChange is a function that can be used as prop for any React component.. but you have added InputChange inside the InputChange named function itself which is incorrect
2. Extraction is a jsx variable which is created from Array.filter .. on each item, filter passes a item[index] to the filter function.. you dont want to do robots[index].name.toLowerCase().includes(query) .. instead you could have done curElem.name.toLowerCase().includes(query) and same applies for Array.map