如何在react原生搜索筛选器中返回无结果

import React, { useState } from 'react';

const SearchFilter = () => {
  const [data, setData] = useState([
    // 数据项
    // ...
  ]);
  const [keyword, setKeyword] = useState('');
  
  const handleInputChange = (e) => {
    const value = e.target.value;
    setKeyword(value);
    
    // 根据关键字筛选数据项
    const filteredData = data.filter(item => item.includes(value));
    
    // 更新组件状态
    setData(filteredData);
  };
  
  return (
    <div>
      <input type="text" value={keyword} onChange={handleInputChange} />
      {data.length > 0 ? (
        <ul>
          {data.map(item => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      ) : (
        <p>没有找到匹配的结果</p>
      )}
    </div>
  );
};

export default SearchFilter;