在React中搜索时返回'no result found‘状态

import React, { useState } from 'react';

const SearchComponent = () => {
  const [searchResult, setSearchResult] = useState(null);

  const handleSearch = (query) => {
    // Perform search logic here
    // Update setSearchResult based on search result
    if (searchResult.length === 0) {
      setSearchResult('no result found');
    } else {
      setSearchResult(searchResultArray);
    }
  };

  return (
    <div>
      <input type="text" onChange={(e) => handleSearch(e.target.value)} />
      {searchResult === null && <p>Loading...</p>}
      {searchResult === 'no result found' && <p>No result found.</p>}
      {Array.isArray(searchResult) && (
        <ul>
          {searchResult.map((result) => (
            <li key={result.id}>{result.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default SearchComponent;