无法将CodeMirror组件值传递至父组件useState致输入框禁用

问题根源 #

直接依赖组件渲染时捕获的父组件endpoint旧值做状态合并，会因闭包问题导致状态更新异常，引发子组件不必要的重渲染，进而破坏CodeMirror的内部实例状态；同时父组件状态更新触发的子组件重渲染，也可能导致编辑器实例被重置，出现禁用现象。

解决方案 #

1. 使用函数式更新确保状态正确性 #

放弃直接引用渲染时的endpoint旧值，改用函数式更新获取最新状态，避免闭包导致的状态不一致：

// 替换原有更新逻辑
const handleBodyChange = (value) => {
  setEndpoint(prevEndpoint => ({
    ...prevEndpoint,
    body: value
  }));
};

函数式更新会自动传入当前最新的状态值，确保每次更新都基于最新的endpoint数据。

2. 本地状态托管编辑器值，双向同步父组件状态 #

用本地状态管理编辑器的输入值，再通过useEffect实现和父组件状态的双向同步，既保证编辑器正常工作，又满足父组件API调用需求：

import { useState, useEffect } from 'react';
import CodeMirror from '@uiw/react-codemirror';
import { json } from '@codemirror/lang-json';

const Body = ({ setEndpoint, endpoint }) => {
  // 本地状态托管编辑器输入值
  const [localBody, setLocalBody] = useState(endpoint.body);

  // 父组件body值变化时，同步到本地状态
  useEffect(() => {
    if (localBody !== endpoint.body) {
      setLocalBody(endpoint.body);
    }
  }, [endpoint.body]);

  // 编辑器值变化时，同步到父组件状态
  const handleChange = (value) => {
    setLocalBody(value);
    setEndpoint(prev => ({ ...prev, body: value }));
  };

  return (
    <CodeMirror
      value={localBody}
      onChange={handleChange}
      extensions={[json()]}
      // 设置稳定key，避免重渲染时编辑器实例被重建
      key="request-body-editor"
      // 确保未意外开启禁用
      disabled={false}
    />
  );
};

export default Body;

3. 减少不必要的重渲染 #

• 用React.memo包裹Body组件，避免父组件无关状态更新触发子组件重渲染：

  import React from 'react';
  // ...其他代码
  export default React.memo(Body);
  

• 如果父组件是函数组件，确保setEndpoint是稳定的函数（可通过useCallback包裹相关逻辑）。

4. 排查禁用属性的意外设置 #

检查代码中是否存在条件渲染逻辑，错误地将CodeMirror的disabled属性设为true，比如是否根据endpoint的其他属性判断禁用状态，确保编辑器的disabled属性仅在需要主动禁用时才开启。

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