Reactjs 带有React的搜索函数

我正在尝试创建一个搜索函数，使用钩子进行React；理想情况下，此函数将搜索当前电影列表，并返回电影标题

//setting state for the search, and search results
export function Home() {
    const [search, setSearch] = useState('');
    const [searchResults, setSearchResults] = useState([]);
...

// filter being used to search thru realist given back
useEffect(() => {
    const results = movie.filter(movie =>
      movie.toLowerCase().includes(searchTerm)
    );
    setSearchResults(results);
  }, [searchTerm]);
....
//returning the value in my search box
  const handleSearch = (e) => {
      setSearch(e.target.value);
  };
...

//showing all genres under carousel, these genres are clickable which bring you to the other titles that are associated with that genre
    const genreList = genres.map((item, index) => {
        return(
            <li className='list-inline-item' key={index}>
                <button type='button' className='btn' style={{ color: 'tomato' }} onClick={(e) =>{
                    handleGenre(item.id)
                }}>
                    {item.name}
                </button>
            </li>
        );
    });
//shows the movies under that genre after you click on a specific genre
    const movieList = movieByGenre.map((item, index) => {
        return (
            <div className='col-md-3 col-sm-6' key={index}>
                <div className='card>'>
                <Link to={`/movie/${item.id}`}>
                    <img className='img-fluid' src={item.poster} alt={item.title}></img>
                </Link>
                <div className='mt-3'>
                <h5> Rated: {item.rating}  </h5>
                </div>
            </div>    
        </div>
        );
    });
...
 <label className='search' htmlFor='search'> SEARCH </label>
        <br/>
        <input type='text'
         className='movie-search-bar' 
         placeholder='type movie title' 
         value={search} 
         onChange={handleSearch}>
         </input>
...
//attempting to map over movie list
    <div className='row mt-3'> {searchResults.map ({movieList})}</div> 

//设置搜索的状态和搜索结果
导出函数Home（）{
const[search，setSearch]=useState（“”）；
const[searchResults，setSearchResults]=useState（[]）；
...
//过滤器用于通过返回的现实主义者进行搜索
useffect（（）=>{
const results=movie.filter（movie=>
movie.toLowerCase（）.includes（searchTerm）
);
设置搜索结果（结果）；
}，[searchTerm]）；
....
//返回“我的搜索”框中的值
常量handleSearch=（e）=>{
设置搜索（如目标值）；
};
...
//显示旋转木马下的所有类型，这些类型可单击，从而将您带到与该类型关联的其他标题
const genreList=genres.map（（项目，索引）=>{
返回(

{
手册编号（项目编号）
}}>
{item.name}

);
});
//单击特定类型后，显示该类型下的电影
const movieList=movieByGenre.map（（项目，索引）=>{
返回(
额定值：{item.rating}
);
});
...
搜寻


...
//正在尝试映射电影列表
{searchResults.map（{movieList}）}

无法返回任何内容，假设这与我试图映射搜索结果的方式有关

---

任何输入都将显示

您错误地使用了变量

searTerm

，而没有使用

search

useEffect(() => {
    const results = movie.filter(movie =>
      movie.toLowerCase().includes(search)
    );
    setSearchResults(results);
  }, [search]);

---

从您共享的片段中，我可以看出数组函数

map

希望函数作为参数传递。看起来您刚刚向其中传递了一些对象。其他线索可能是您正在筛选的数组和筛选对象的相同名称

movie.filter（movie=>

.Js可能会在那里丢失它，但您没有提到任何应用程序崩溃，所以可能只是您的描述错误：D

感谢您的回复，这确实更正了一个错误。现在我只收到

第21:21行：“movie”未定义

您从哪里获得电影列表？抱歉，我更新了问题以显示此信息的位置是从返回的，它们被它们的类型映射到返回与该类型相关的电影标题您在这里尝试做什么

{searchResults.map（{movieList}）}

？尝试使用我的搜索功能映射当前电影，并返回与我输入的标题匹配的电影。