React终端模拟器cd进子目录后ls/cat命令失效问题排查

问题描述 #

开发个人编程网站的React终端模拟器，实现了pwd、ls、cat、cd基础功能。使用FileExplorer组件管理文件系统时，cd进入folder1后pwd显示当前路径正确，但无法用ls列出file3.txt，也无法用cat读取该文件。

错误原因分析 #

1. 文件结构错误：file3.txt的路径定义混乱，当前嵌套在/home/user/folder1对象中的路径仍是/home/user/file3.txt，系统无法识别该文件属于folder1层级。
2. listDirectory函数逻辑缺陷：通过全局过滤路径前缀的方式获取目录内容，递归处理子目录时会重复添加条目，且无法识别嵌套在目录对象内的文件。
3. readFile函数局限性：仅从根层级的fileContents查找文件，无法深入嵌套的目录对象读取内容。
4. cd命令的父目录管理问题：依赖state存储父目录，容易出现状态不一致，导致cd..逻辑异常。

修复后的完整代码 #

import React, { useState } from 'react';

const FileExplorer = () => {
  const [currentDirectory, setCurrentDirectory] = useState('/home/user');
  
  // 修正文件系统层级结构：目录对象内的文件使用完整绝对路径
  const [fileContents, setFileContents] = useState({
    '/home/user/file1.txt': 'Content of file1.txt',
    '/home/user/file2.txt': 'Content of file2.txt',
    '/home/user/folder1': {
      '/home/user/folder1/file3.txt': 'Content of file3.txt'
    }
  });

  // 解析当前目录的父路径
  const getParentDirectory = (path) => {
    const parts = path.split('/').filter(part => part);
    if (parts.length <= 1) return '/';
    return '/' + parts.slice(0, -1).join('/');
  };

  // 获取当前目录的直接内容（文件和子目录）
  const getDirectoryContents = (directory) => {
    const dir = fileContents[directory];
    if (!dir || typeof dir !== 'object') return [];
    return Object.keys(dir);
  };

  const listDirectory = (directory) => {
    let entries = [];
    const currentContents = getDirectoryContents(directory);
    
    // 添加当前目录的直接条目
    entries.push(...currentContents);
    
    // 递归遍历子目录
    currentContents.forEach(path => {
      const entry = fileContents[directory][path];
      if (typeof entry === 'object') {
        entries.push(...listDirectory(path));
      }
    });
    
    return entries;
  };

  const changeDirectory = (newDirectory) => {
    let targetPath;
    
    if (newDirectory === '..') {
      targetPath = getParentDirectory(currentDirectory);
      if (targetPath === currentDirectory) {
        return 'cd: ../: No such file or directory';
      }
    } else if (newDirectory.startsWith('/')) {
      targetPath = newDirectory;
    } else {
      targetPath = currentDirectory === '/' 
        ? `/${newDirectory}` 
        : `${currentDirectory}/${newDirectory}`;
    }

    if (fileContents[targetPath] && typeof fileContents[targetPath] === 'object') {
      setCurrentDirectory(targetPath);
    } else {
      return `cd: ${newDirectory}: Not a directory`;
    }
  };

  const resolveFilePath = (filePath) => {
    if (filePath.startsWith('/')) return filePath;
    return currentDirectory === '/' ? `/${filePath}` : `${currentDirectory}/${filePath}`;
  };

  // 递归查找文件内容
  const findFileContent = (filePath) => {
    if (fileContents[filePath]) {
      return typeof fileContents[filePath] === 'string' 
        ? fileContents[filePath] 
        : `cat: ${filePath}: Is a directory`;
    }

    const parts = filePath.split('/').filter(part => part);
    let current = fileContents;
    let currentPath = '';

    for (const part of parts) {
      currentPath += `/${part}`;
      if (!current[currentPath]) {
        return `cat: ${filePath}: No such file or directory`;
      }
      current = current[currentPath];
    }

    return typeof current === 'string' ? current : `cat: ${filePath}: Is a directory`;
  };

  const readFile = (filePath) => {
    const fullPath = resolveFilePath(filePath);
    return findFileContent(fullPath);
  };

  const ls = () => {
    const currentDirContents = getDirectoryContents(currentDirectory);
    // 返回相对路径格式
    return currentDirContents.map(path => {
      const relativePath = path.replace(`${currentDirectory}/`, '');
      return relativePath === path ? path : relativePath;
    }).join(' ');
  };

  return { currentDirectory, changeDirectory, readFile, ls };
};

export default FileExplorer;

关键修改说明 #

• 文件结构修正：将folder1内的file3.txt路径改为/home/user/folder1/file3.txt，明确层级归属。
• 目录内容获取逻辑重构：getDirectoryContents直接读取目标目录对象的属性，listDirectory递归遍历子目录，确保内容准确无重复。
• 文件读取逻辑优化：findFileContent支持逐层查找嵌套目录中的文件，解决子目录文件无法读取的问题。
• cd命令逻辑改进：通过解析路径获取父目录，替代依赖state的方式，避免状态不一致。
• ls命令输出优化：返回当前目录的直接内容，符合真实终端的默认ls行为（如需递归可添加-R参数逻辑）。

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