React搜索筛选无结果后无法恢复正常显示问题求助

Hey there, let's break down and fix this issue you're facing with your search filter and pagination component!

First, let's get to the root of the problem: when you clear the search term, your pageOfItems stays empty even though your original state.holder and issues data are intact. This almost always boils down to how you're handling filtered data and passing it to the pagination component.

Common Causes & Fixes #

1. Your Filter Logic Isn't Resetting to Original Data

The most likely culprit is that when you clear the search term, your filtered data isn't switching back to the full state.holder dataset. For example, if your filter code looks like this:

// ❌ Wrong: Returns empty array when search term is cleared
const filteredIssues = searchTerm 
  ? state.holder.filter(issue => issue.title.includes(searchTerm)) 
  : [];

This will leave you with an empty array when the search box is cleared, so the pagination component has no data to generate pageOfItems from.

Fix it by returning the original dataset when the search term is empty:

// ✅ Correct: Resets to full dataset when search term is cleared
const filteredIssues = searchTerm 
  ? state.holder.filter(issue => issue.title.toLowerCase().includes(searchTerm.toLowerCase())) 
  : state.holder;

Pro tip: Adding toLowerCase() makes the search case-insensitive, which is a nicer user experience.

2. Pagination Component Isn't Detecting Data Changes

Jason Watmore's pagination component relies on the items prop to trigger updates. If the component isn't re-rendering when you clear the search term, it might be because:

• You're passing the same array reference for filteredIssues when clearing the search (unlikely, but possible if you're mutating arrays instead of creating new ones).
• The component is using React.memo or a custom shouldComponentUpdate that's skipping re-renders incorrectly.

Quick test to verify:
Add a console log right where you calculate filteredIssues to confirm it's switching back to the full dataset:

console.log(
  `Search term: "${searchTerm}"`,
  `Filtered count: ${filteredIssues.length}`,
  `Original count: ${state.holder.length}`
);

If the counts match when the search term is empty, the issue is with the pagination component's update logic. Try forcing a fresh array reference when resetting:

const filteredIssues = searchTerm 
  ? state.holder.filter(...) 
  : [...state.holder]; // Creates a new array to trigger re-render

3. Pagination State Isn't Resetting When Data Changes

If your current page number was higher than the total pages of the empty search result, clearing the search might leave the pagination stuck on an invalid page (e.g., page 5 when the full dataset only has 3 pages). This would result in an empty pageOfItems even though the full dataset exists.

Fix it by resetting the current page to 1 whenever filtered data changes:

import { useEffect } from 'react';

// Add this useEffect to your component
useEffect(() => {
  setCurrentPage(1); // Reset to first page when filtered data changes
}, [filteredIssues]);

Example Corrected Component Snippet #

Here's how your component might look with all these fixes applied:

import React, { useState, useEffect } from 'react';
import Pagination from './Pagination'; // Your Jason Watmore pagination component

const IssueDashboard = () => {
  const [holder, setHolder] = useState([]);
  const [searchTerm, setSearchTerm] = useState('');
  const [currentPage, setCurrentPage] = useState(1);
  const pageSize = 10;

  // Fetch initial data (simulated)
  useEffect(() => {
    const fetchIssues = async () => {
      const response = await fetch('/api/issues');
      const data = await response.json();
      setHolder(data);
    };
    fetchIssues();
  }, []);

  // Calculate filtered data
  const filteredIssues = searchTerm
    ? holder.filter(issue => 
        issue.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
        issue.description.toLowerCase().includes(searchTerm.toLowerCase())
      )
    : holder;

  // Reset page when filtered data changes
  useEffect(() => {
    setCurrentPage(1);
  }, [filteredIssues]);

  return (
    <div className="issue-dashboard">
      <input
        type="text"
        placeholder="Search issues..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />

      <Pagination
        items={filteredIssues}
        currentPage={currentPage}
        pageSize={pageSize}
        onChangePage={(page) => setCurrentPage(page)}
      />

      {/* Render current page items */}
      <div className="issue-list">
        {filteredIssues.slice(
          (currentPage - 1) * pageSize,
          currentPage * pageSize
        ).map(issue => (
          <div key={issue.id} className="issue-card">
            <h3>{issue.title}</h3>
            <p>{issue.description}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default IssueDashboard;

Final Checks #

• Use React DevTools to inspect the items prop passed to the pagination component when clearing the search. It should match the full state.holder dataset.
• If you're storing filtered data in state instead of calculating it on render, make sure you update that state to the full dataset when the search term is cleared.

内容的提问来源于stack exchange，提问作者Maicmi