函数组件中state未更新：代码编辑器切换语言时setCode不生效

1. 先明确React状态更新的异步特性 #

React的useState更新器是异步的，如果你在调用setCode后立刻console.log(code)，打印的必然是更新前的旧值。要验证状态是否真正更新，建议用useEffect监听code的变化：

useEffect(() => {
  console.log('当前code状态:', code);
}, [code]);

2. 确认语言与默认代码的映射逻辑 #

确保切换语言时，能正确拿到对应语言的默认代码。可以先定义一个映射对象：

const defaultCodeMap = {
  javascript: '// JavaScript 默认示例代码',
  python: '# Python 默认示例代码',
  java: '// Java 默认示例代码'
};

然后在切换语言时，从映射中取值更新code：

const handleLanguageChange = (selectedLang) => {
  setLanguage(selectedLang);
  setCode(defaultCodeMap[selectedLang]);
};

3. 检查编辑器组件的受控绑定 #

如果你的代码编辑器是受控组件，必须确保它的value属性绑定code状态，同时onChange事件能正确更新code：

<CodeEditor 
  value={code}
  onChange={(newCode) => setCode(newCode)}
  language={language}
/>

如果使用的是第三方编辑器组件（如Monaco Editor、CodeMirror），还要确认其受控模式的配置是否正确，部分组件需要额外处理才能实时响应状态变化。

4. 排查闭包导致的旧值问题 #

如果handleLanguageChange用useCallback包裹，要确保依赖数组包含defaultCodeMap等相关依赖，避免闭包捕获旧值：

const handleLanguageChange = useCallback((selectedLang) => {
  setLanguage(selectedLang);
  setCode(defaultCodeMap[selectedLang]);
}, [defaultCodeMap]);

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