如何用useState变量绑定SandpackCodeEditor的代码值？

方案1：受控组件模式（state + onChange） #

直接通过onChange回调同步编辑器输入到状态变量，这是最直接的实现方式：

import { useState } from 'react';
import { SandpackCodeEditor } from '@codesandbox/sandpack-react';

function App() {
  const [code, setCode] = useState(`function App() {
  return <h1>Hello Sandpack</h1>;
}`);

  return (
    <SandpackCodeEditor
      language="jsx"
      code={code}
      onChange={(newCode) => setCode(newCode)}
    />
  );
}

export default App;

核心要点：

• 必须传递onChange回调，否则编辑器输入不会同步到你的code状态变量
• 确保code的初始值与编辑器默认代码一致，避免渲染冲突

方案2：使用useActiveCode Hook（配合SandpackProvider） #

useActiveCode需要在SandpackProvider上下文环境中使用，它能直接获取/修改当前活跃文件的代码：

import { useState, useEffect } from 'react';
import { SandpackProvider, SandpackCodeEditor, useActiveCode } from '@codesandbox/sandpack-react';

function CodeEditorWrapper() {
  const { code, updateCode } = useActiveCode();
  // 若需同步到本地状态，可监听code变化
  const [localCode, setLocalCode] = useState(code);
  
  useEffect(() => {
    setLocalCode(code);
  }, [code]);

  return (
    <SandpackCodeEditor
      onChange={(newCode) => updateCode(newCode)}
    />
  );
}

function App() {
  return (
    <SandpackProvider
      template="react"
      files={{
        '/App.js': {
          code: `function App() {
  return <h1>Hello Sandpack</h1>;
}`
        }
      }}
    >
      <CodeEditorWrapper />
    </SandpackProvider>
  );
}

export default App;

核心要点：

• useActiveCode只能在SandpackProvider内部的组件中调用
• updateCode方法用于修改当前活跃文件的代码，会自动同步到编辑器和上下文
• 如需本地状态同步，用useEffect监听code的变化更新本地状态

常见问题排查 #

• 未添加onChange回调：编辑器默认是非受控模式，输入不会触发状态更新，必须手动绑定onChange
• 未套SandpackProvider使用useActiveCode：会导致Hook无法获取上下文，出现报错或空值
• 初始代码不一致：确保state初始值与SandpackCodeEditor/SandpackProvider中的文件代码一致，避免渲染冲突

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