进行搜索后如何显示（找不到结果）

Question

问题：

我想在进行搜索后显示（找不到结果）并且没有找到任何东西，我知道我应该处理错误，但我不知道如何！初学者的事情。

代码：

首先，我获取了数据，然后我作为apidata定居，然后在用户键入时开始过滤结果，但我想显示一个（找不到结果）。

export default function SearchInput() {

    const [APIData, setAPIData] = useState([]);
    const [searchInput, setSearchInput] = useState('');
    const [filteredResults, setFilteredResults] = useState([]);

    const [error, setError] = useState(false);
    const [isLoaded, setIsLoaded] = useState(false);
    
    useEffect(() => {
        const fetchData = async () => {
          setError(false);
          setIsLoaded(true);
    
          try{
          const response = await axios("/posts");
          setAPIData(response.data);
          } catch(error) {
            setError(true);
            console.error(error);
          }
          setIsLoaded(false);
        };
        fetchData();
      }, []);
      console.log(APIData)
    
    const searchItems = (searchValue) => {
        setSearchInput(searchValue)
        if (searchInput !== '') {
            const filteredData = APIData.filter((post) => {
                return Object.values(post).join('').toLowerCase().includes(searchInput.toLowerCase())
            })
            setFilteredResults(filteredData)
        }
        else{
            setFilteredResults(APIData)
        }
    }

    return (
        
        <div style={{ padding: 20 }}>
            
            <OutlinedInput 
                className="SearchInput"
                placeholder='Search...'
                onChange={(e) => searchItems(e.target.value)}
                endAdornment={
                    <InputAdornment>
                    <SearchIcon />
                    </InputAdornment>
                }
            />

            <div style={{ marginTop: 20 }}>

                {searchInput.length > 0 ? (

                    filteredResults.map((post) => {
                        return (
                            <div className="card" key={post._id}>
                            <div className="card-content">
                            <Link to={`/post/${post._id}`} className="link">
                            <h2 className="results-title">
                                {post.title}
                            </h2>
                            <ol className="card-username">
                                {post.username}      
                            </ol>
                            </Link>
                            </div>
                        </div>
                        )
                    })
                ) : (
                    APIData.map((post) => {
                        return (
                            <article className="card" key={post._id}>
                            <div className="card-content">
                            <Link to={`/post/${post._id}`} className="link">
                            <h2 className="card-name">
                                {post.title}
                            </h2>
                            <ol className="card-username">
                                {post.username}      
                            </ol>
                            </Link>
                            </div>
                        </article>
                        )
                    })
                )}
            </div>
        </div>