(React)通过 api 按搜索词过滤

Question

我正在尝试在我的 React 项目中使用搜索栏组件来按标题搜索/过滤电影的 api 列表。现在我的搜索词是控制台日志记录，但我正在尝试过滤电影列表以仅显示与该词匹配的标题。我在使用术语更新电影状态和显示新数组时遇到问题。

应用程序

import SearchBar from "../Search/SearchBar"

export default function Movies() {
  const [movies, setMovies] = useState([]);

  async function getMovies() {
    const movieData = await fetchMovies();

    console.log(movieData);
    setMovies(
      movieData.data.data.sort((a, b) => a.title.localeCompare(b.title))
    );
  }

  useEffect(() => {
    getMovies();
  }, []);

 async function onSearchSubmit(term) {
    console.log(term)
    let fill = []
    movies.filter((movie) => {
        if(movie.title === term) {
           fill.push(movie.title)
        }
       setMovies(fill)

    })
    }

  return (
    <>
      <Nav 
      movies={movies}
      setMovies={setMovies}/>
      <SearchBar
      onSubmit={onSearchSubmit}/>

      {movies ? (
        <div>
          <div>
            {movies.map((m, idx) => {
              return <div key={idx}>{m.title}</div>;
            })}{" "}
          </div>
        </div>
      ) : (
        "loading..."
      )}
    </>
  );
}

搜索栏组件

import React,{useState} from 'react';

const SearchBar = ({onSubmit}) => {

    const [term, setTerm] = useState("")


    function onFormSubmit(event){
        event.preventDefault()
        onSubmit(term)
        
        }

    return ( 
        
        <div className="ui segment">
        <form onSubmit={onFormSubmit} className="ui form">
          <div className="field">
            <label>Movie Search</label>
            <input
              type="text"
              value={term}
              onChange={(e) => setTerm( e.target.value)}
            />
          </div>
        </form>
      </div>
     );
}
 
export default SearchBar;

Answer 1

首先需要额外的状态来记录加载的动作列表：

const movies = useRef([]);
const [filteredMovies, setFilteredMovies] = useState([]);

最好使用useCallback 声明处理程序，并避免混合使用声明式和命令式样式。例如：

const onSearchSubmit = useCallback(async (term) => {
  if (term) {
    const _ = movies.current.filter(({ title }) => (title === term));
    setFilteredMovies(_);
  } else {
    setFilteredMovies(movies.current);
  }
}, [movies]);

https://jsfiddle.net/pq9xkewz/2/