如何在React中运行搜索后显示“找不到记录”

import React, { Component } from 'react';

class SearchResults extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchResults: []
    };
  }

  handleSearch = (keyword) => {
    // 根据传入的关键字进行搜索逻辑处理，得到搜索结果
    const searchResults = this.props.data.filter(item => item.includes(keyword));
    
    // 更新state中的搜索结果
    this.setState({ searchResults });
  }

  render() {
    const { searchResults } = this.state;

    return (
      <div>
        <input type="text" onChange={(e) => this.handleSearch(e.target.value)} />

        {searchResults.length > 0 ? (
          <ul>
            {searchResults.map((item, index) => (
              <li key={index}>{item}</li>
            ))}
          </ul>
        ) : (
          <p>找不到记录</p>
        )}
      </div>
    );
  }
}

export default SearchResults;