当我输入搜索组件时，我注意到有一个延迟，在输入几个字符之后，在第4或第5个字符之后，我会看到一个白色，并且在我的控制台中显示一条消息，指出 “无法在未安装的组件上执行React状态更新。这是一个no-op，但它表明您的应用程序中存在内存泄漏。要修复此问题，取消useEffect清除函数中的所有订阅和异步任务”。
我的目标是有一个搜索栏，当有人搜索电影或演员时，它能够正确地呈现所有的结果。
下面是接口的代码：

export interface ActorAttributes {
    TYPE?: string,
    NAME?: string,
}

export interface MovieAttributes {
    OBJECTID: number,
    SID: string,
    NAME: string,
    DIRECTOR: string,
    DESCRIP: string,

应用程序tsx代码：

import { useEffect, useState } from 'react';
import { searchMovies, searchActors, MovieAttributes, ActorAttributes } from "@utils/atts"

const Home: React.FC = () => {
    const [search, setSearch] = useState(false);
    const [movieSearch, setMovieSearch] = useState<MovieAttributes[]>([]);
    const [actorSearch, setActorSearch] = useState<ActorAttributes[]>([]);
    const [searchTerm, setSearchTerm] = useState('');

    useEffect(() => {
        if (searchTerm.length > 0) {
            setSearch(true);

            let newMovieSearch = [...movieSearch];

            searchMovies(searchTerm).then(results => {
                newMovieSearch = results;
                setMovieSearch(results);
            });

            searchActors(searchTerm, newMovieSearch[1].SID).then(results => {
                setActorSearch(results);
            });

            setSearch(false);
        }
    }, [searchTerm]);

    const handleSearchTermChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setSearchTerm(event.target.value);
    }

    return (
        <div>
            <input type="text" value={searchTerm} onChange={handleSearchTermChange} />
            {search && <p>Searching...</p>}
            {movieSearch.length > 0 && <p>Found {movieSearch.length} movies</p>}
            {actorSearch.length > 0 && <p>Found {actorSearch.length} actors</p>}
        </div>
    );
}

目前我只能在我的搜索栏中输入2-3个字符，然后它就会开始延迟和/或我会在我的控制台中收到一个错误消息。我是新的React，这是我第一次创建一个搜索组件，所以如果任何人有任何提示，想法，建议等，请随时留下评论。感谢任何人谁花时间阅读我的帖子：）

<div className="App">
     <ul className="posts">
        <input type="text" onChange={handleSearchTermChange} />
        {movieSearch.map((movie) => {
            if (searchTerm == "" || movie.NAME.toLowerCase().includes(searchTerm.toLowerCase())) {
                return (
                    <li key={movie.OBJECTID}>
                        <h3>{movie.NAME}</h3>
                        <p>{movie.DIRECTOR}</p>
                        <p>{movie.DESCRIP}</p>
                    </li>
                );
             }
            return null;
        )}
    </ul>
</div>