无法将 codemirror 组件中的值传递给 useState 钩子

Question

所以我试图将值从 codemirror 组件的文本字段发送到称为 setendpoint 的父组件使用状态，在该端点中我有像 {url = "", headers = {}, params = {}, body = "" } 这样的值.我将端点组件传递给 Reqbodyinput.jsx 组件，其中有不同的子组件，如 header、parameter 和 body。然后我将 props 传递给 body 以设置从 body 到应用程序或父组件中的钩子的值。现在，当将 codemirror 组件中更改的值设置为 setendpoint{body: value} 时，codemirror 文本字段变为禁用，我无法在该字段中写入。试了很多方法都没有用

我使用 codemirror 包及其语言扩展，并在文本字段中支持不同的语言。如果有人有任何解决方案，那将对我很有帮助。

import CodeMirror from "@uiw/react-codemirror";
import { dracula } from "@uiw/codemirror-theme-dracula";
import { json } from "@codemirror/lang-json";
import { javascript } from "@codemirror/lang-javascript";
import { xml } from "@codemirror/lang-xml";
import { html } from "@codemirror/lang-html";

如果我在同一个名为 textformat 的组件中使用 usestate 设置值，它工作正常但对我没有用，因为我想将它传递给父组件以发出 api 请求。

// Body Component
function Body({ setEndpoint, endpoint }) {
  const [value, setValue] = useState("JSON");

  function TextFormat() {

    // I want to pass the value to setEndpoint({ ...endpoint, body: newValue }) but it is not working. help ME !!

    const handleChange = React.useCallback((value, viewUpdate) => {
      console.log('value:', value);
      setEndpoint({ ...endpoint, body: value })
    }, []);



    return (
      <Col md={12}>
        <CodeMirror
          theme={dracula}
          height="25vh"
          extensions={
            value === "JSON"
              ? [json()]
              : value === "JavaScript"
              ? [javascript()]
              : value === "HTML"
              ? [html()]
              : [xml()]
          }
          onChange={handleChange}
        />
      </Col>
    );
  }

  function handleDropDownValue(event) {
    setValue(event.target.textContent);
  }

  return (
    <div className="px-4 parameter-area">
      <Row className="">
        <Col md={1} className="w-auto">
          <p>Content Type</p>
        </Col>
        <Col md={1}>
          <Dropdown>
            <Dropdown.Toggle
              variant="plain"
              className="custom-dropdown-toggle"
              style={{ fontSize: "1rem", padding: "0" }}
            >
              {value}
            </Dropdown.Toggle>
            <Dropdown.Menu variant="dark">
              <Dropdown.Item onClick={handleDropDownValue}>Text</Dropdown.Item>
              <Dropdown.Item onClick={handleDropDownValue}>JSON</Dropdown.Item>
              <Dropdown.Divider
                style={{ backgroundColor: "grey" }}
              ></Dropdown.Divider>
              <Dropdown.Item onClick={handleDropDownValue}>
                JavaScript
              </Dropdown.Item>
              <Dropdown.Item onClick={handleDropDownValue}>HTML</Dropdown.Item>
              <Dropdown.Item onClick={handleDropDownValue}>XML</Dropdown.Item>
            </Dropdown.Menu>
          </Dropdown>
        </Col>
      </Row>
      <Row className="g-2">
        <TextFormat />
      </Row>
    </div>
  );
}

我尝试使用 useEffect 来更新挂钩，但它仍然在控制台中产生更多错误。也尝试了其他钩子，但仍然没有用。