javascript - 根据输入过滤列表

Question

const App = () => {
  const [searchTerm, setSearchTerm] = React.useState('');
  const stories = [
    ...
  ];

  const handleSearch = event => {
    setSearchTerm(event.target.value);
  };

  const searchStories = stories.filter((story) => {
    return story.title.includes(searchTerm);
  })

  return (
    <div>
      <h1>My Hacker Stories</h1>
      <Search onSearch={handleSearch}/>
      <hr />
      <List list={searchStories}/>
    </div>
  );
};

const Search = (props) =>{

  return (
    <div>
      <label htmlFor="search"><strong>Search:</strong></label> { ' '}
      <input id='search' type='text' onChange={props.onSearch}/>
    </div>
  );

};


const List = ({list}) =>
  list.map((item) =>
     (
      <div key={item.objectID}>
        <span>
          <a href={item.url}>{item.title}</a>
        </span>
        <span>{item.author}</span>
        <span>{item.num_comments}</span>
        <span>{item.points}</span>
      </div>
    )
  )

我正在尝试根据搜索输入过滤列表组件。除非我在输入框中输入搜索词，否则它会起作用。当我尝试搜索一个项目时，List 是空的，没有显示任何内容，它是空的 List，但是，没有显示错误。

Answer 1

我对您的代码进行了一些更改以生成一个可运行的代码段，您可以将其改回您的代码，

只需要为 searchStories 添加另一个状态并使用 useEffect用于过滤时 searchTerm像这样的变化:

*点击 Run Code Snippet并输入 h所以你可以看到过滤器是如何工作的

const App = () => {
  const [searchTerm, setSearchTerm] = React.useState("");
  const [searchStories, setSearchStories] = React.useState([]);
  const stories = ["hello", "hi", "bye", "have a good day"];

  const handleSearch = event => {
    setSearchTerm(event.target.value);
  };

  React.useEffect(() => {
    setSearchStories(
      stories.filter(story => {
        return story.includes(searchTerm);
      })
    );
  }, [searchTerm]);

  return (
    <div>
      <h1>My Hacker Stories</h1>
      <Search onSearch={handleSearch} />
      <hr />
      <List list={searchStories} />
    </div>
  );
};

const Search = props => {
  return (
    <div>
      <label htmlFor="search">
        <strong>Search:</strong>
      </label>{" "}
      <input id="search" type="text" onChange={props.onSearch} />
    </div>
  );
};

const List = ({ list }) =>
  list.map(item => (
    <div key={item}>
      {item}
      {/* <span>
        <a href={item.url}>{item.title}</a>
      </span>
      <span>{item.author}</span>
      <span>{item.num_comments}</span>
      <span>{item.points}</span> */}
    </div>
  ));

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

<div id="root"></div> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>