Javascript 根据输入筛选列表 const-App=（）=>{ const[searchTerm，setSearchTerm]=React.useState（“”）； 常数故事=[ ... ]; const handleSearch=事件=>{ setSearchTerm（event.target.value）； }; const searchStories=stories.filter（（story）=>{ 返回故事。标题。包括（搜索术语）； }) 返回( 我的黑客故事 ); }; 常量搜索=（道具）=>{ 返回( 搜索：{''} ); }; 常量列表=（{List}）=> list.map（（项目）=> ( {item.author} {item.num_comments} {item.points} ) )

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

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

只需为

searchStories

添加另一个状态，并在

searchTerm

发生如下更改时使用

useffect

进行过滤：

*单击

运行代码片段

并键入

h

，以便查看过滤器的工作方式

const-App=（）=>{
const[searchTerm，setSearchTerm]=React.useState（“”）；
const[searchStories，SetSearchTories]=React.useState（[]）；
const stories=[“你好”、“你好”、“再见”、“祝您愉快”]；
const handleSearch=事件=>{
setSearchTerm（event.target.value）；
};
React.useffect（（）=>{
集选区(
stories.filter（story=>{
返回故事。包括（搜索术语）；
})
);
}，[searchTerm]）；
返回(
我的黑客故事

);
};
const Search=props=>{
返回(
搜索：
{" "}
);
};
常量列表=（{List}）=>
list.map（项=>(
{item}
{/* 
{item.author}
{item.num_comments}
{item.points}*/}
));
const rootElement=document.getElementById（“根”）；
ReactDOM.render(
,
根元素
);
过滤器功能检查搜索词是否出现在我们的故事项目标题中，但它仍然对字母大小写过于固执己见。如果我们搜索“react”，则渲染列表中没有经过筛选的“react”故事。为了解决这个问题，我们必须降低故事标题和搜索词的大小写

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

也许可以尝试集成来完成此操作。我将此代码复制/粘贴到一个（必须生成一些数据）中，它看起来很有用。
const App = () => {
  ...

  const searchedStories = stories.filter(function(story) {
    return story.title
      .toLowerCase()
      .includes(searchTerm.toLowerCase());
  });

  ...
};