React搜索输入过滤异常：无法匹配主目录及子文件夹内文件

Hey there! Let's figure out why your search component isn't catching filenames like 01_greeting_spec.rb or greeting.rb—but works fine when searching for folder names like /bin. From your description, the core issue is almost certainly in how your filter logic handles file nodes vs. directory nodes, and whether it's checking the right parts of the path.

Common Root Causes #

• Your filter is probably only checking directory names at the top level, not diving into folders to match individual filenames.
• Or, when matching against paths, you're not isolating the actual filename portion (e.g., you're checking the full path /bin/greeting.rb instead of just greeting.rb for a search term like "greeting").

Step-by-Step Solutions #

1. Update Your Filter Logic to Recursively Check Files #

You need a filter function that:

• Checks if a directory itself matches the search term, and looks inside the directory to see if any child files or subfolders match.
• Directly checks each file's name against the search term.

Here's a practical example (adjust based on your component's data structure):

function filterFileSystemNodes(nodes, searchTerm) {
  if (!searchTerm.trim()) return nodes;
  const lowerSearch = searchTerm.toLowerCase();

  return nodes.filter(node => {
    // Extract the name to match (handle root directory "." specially)
    const nodeName = node.type === 'directory' 
      ? node.path.split('/').pop() || '.'
      : node.path.split('/').pop();
    const isMatch = nodeName.toLowerCase().includes(lowerSearch);

    // For directories: check if we have matching children
    if (node.type === 'directory' && node.children) {
      const matchedChildren = filterFileSystemNodes(node.children, searchTerm);
      // Keep the directory if it matches, or if any child matches
      return isMatch || matchedChildren.length > 0;
    }

    // For files: just return if the name matches
    return isMatch;
  });
}

2. Isolate Filenames for Matching #

Instead of matching against the full file path, always extract the filename first (using split('/').pop() as in the example above). This ensures searches for short terms like "greet" will hit greeting.rb or 01_greeting_spec.rb, even if they're nested in /bin or /spec.

3. Preserve Parent Directories for Matched Files #

When a file matches, make sure its parent directory is also included in the results—this is why searching for /bin works (you see the folder and all its files), and you need the same behavior in reverse: matching a file should show its parent folder so users can see where the file lives.

4. Test Edge Cases #

Verify these scenarios to ensure your fix works:

• Search for partial filename matches (e.g., "greet" should find "greeting.rb")
• Search for files in nested subfolders
• Search for the root directory (".") to confirm all items show up
• Search for filenames with special characters (underscores, dots, hyphens)

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