如何在react中制作Api过滤列表和实现无限滚动分页

import React, { Component } from 'react';

class FilteredList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      filter: '',
      data: [],
      page: 1,
      pageSize: 10,
      isLoading: false,
    };
  }

  componentDidMount() {
    this.fetchData();
    this.attachScrollListener();
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.filter !== this.state.filter) {
      this.fetchData();
    }
  }

  componentWillUnmount() {
    this.detachScrollListener();
  }

  attachScrollListener() {
    window.addEventListener('scroll', this.handleScroll);
  }

  detachScrollListener() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll = () => {
    if (
      window.innerHeight + window.scrollY >= document.body.offsetHeight &&
      !this.state.isLoading
    ) {
      this.setState(prevState => ({
        page: prevState.page + 1,
      }), this.fetchData);
    }
  };

  fetchData = () => {
    const { filter, page, pageSize } = this.state;
    const url = `https://api.example.com/data?filter=${filter}&page=${page}&pageSize=${pageSize}`;

    this.setState({ isLoading: true });

    fetch(url)
      .then(response => response.json())
      .then(data => {
        this.setState(prevState => ({
          data: prevState.data.concat(data),
          isLoading: false,
        }));
      })
      .catch(error => {
        console.error('Error fetching data:', error);
        this.setState({ isLoading: false });
      });
  };

  handleFilterChange = event => {
    this.setState({ filter: event.target.value });
  };

  render() {
    const { data, filter } = this.state;
    const filteredData = data.filter(item =>
      item.toLowerCase().includes(filter.toLowerCase())
    );

    return (
      <div>
        <input
          type="text"
          value={filter}
          onChange={this.handleFilterChange}
          placeholder="Filter data"
        />
        <ul>
          {filteredData.map(item => (
            <li key={item}>{item}</li>
          ))}
        </ul>
        {this.state.isLoading && <div>Loading...</div>}
      </div>
    );
  }
}

export default FilteredList;