React onchange事件搜索api onChange未正常工作

import React, { Component } from 'react';

class SearchComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
      searchResults: []
    };
  }

  handleChange = (event) => {
    const value = event.target.value;
    this.setState({ inputValue: value }, () => {
      if (value.length > 2) { // 假设我们只在输入超过两个字符后调用API
        this.searchAPI(value);
      }
    });
  }

  searchAPI = async (query) => {
    try {
      const response = await fetch(`https://api.example.com/search?q=${query}`);
      const data = await response.json();
      this.setState({ searchResults: data.results });
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  }

  render() {
    return (
      <div>
        <input type="text" value={this.state.inputValue} onChange={this.handleChange} />
        <ul>
          {this.state.searchResults.map((result, index) => (
            <li key={index}>{result.title}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default SearchComponent;