React项目调用setActiveFile报not a function及activeFile为空问题

开发者阿泽

2026-9-24

问题原因及修复方案

核心问题根源

useState 的返回值是数组格式，你的代码中错误使用了对象解构，导致状态值和更新方法都解构失败为undefined，直接引发了你提到的两个问题：

Editor组件中activeFile为undefined，渲染到页面就显示为空字符串
setActiveFile为undefined，调用时就会抛出「不是函数」的类型错误

修复步骤

1. 修复父组件EditPage的useState解构

将对象解构改为数组解构即可解决核心报错：

import '../styles/style.css';
import Editor from './Editor'
import Sidebar from './Sidebar'
import React,  {useState} from 'react';

const WContext = React.createContext();

const EditPage = () => {
    // 把原来的大括号{}改成方括号[]即可
    const [activeFile, setActiveFile] = useState('Empty');


    return <>
        <WContext.Provider value={{activeFile, setActiveFile}}>
        <h1 className="edittitle">Edit Page</h1>
        <div className="edit">
            <Sidebar />
            <Editor />
        </div>
        </WContext.Provider>
    </>
}

export default EditPage;
export {WContext};

2. 修复文件对象渲染异常问题

你现在点击侧边栏按钮时传给setActiveFile的是完整文件对象，而初始默认值是字符串'Empty'，如果直接渲染v.activeFile，选中文件时会显示[object Object]不符合预期，二选一修改即可：

方案A：点击时只传递要展示的文件名

// Sidebar组件内按钮的onClick修改为
onClick={() => v.setActiveFile(`${f.name}.${f.extension}`)}

方案B：Editor组件内适配对象格式做展示

// Editor组件内opened div修改为
<div className="opened">
  {typeof v.activeFile === 'string' ? v.activeFile : `${v.activeFile.name}.${v.activeFile.extension}`}
</div>