Reactjs React（Preact）渲染内容两次

在可编辑的pre元素上，我只在按下enter键时运行onKeyDown脚本，以避免文本中不需要的HTML元素

render({}, {content}) {
        console.log("render: "+content);
        return <p contenteditable onKeyDown={this.handleKeyDown}>{content}</p>
}

render（{}，{content}）{
console.log（“呈现：+内容”）；
return
{content}
}

在

handleKeyDown

函数中，段落内容被更改，并调用

setState（content:newText）

，以便再次呈现内容。这将导致新文本被编写两次

当我输入“hello world”并在“hello”后中断时，它将导致 “你好
世界你好
“世界”

即使handleKeyDown和render函数记录了正确的字符串：
“你好
“世界”

---

我在这里做错了什么？

当使用

contentEditable

时，通常应该使用

危险的HTML

来设置HTML内容

  <div
    contentEditable
    dangerouslySetInnerHTML={{
      __html: value
    }}
  />

---

这里展示了如何做到这一点。

谢谢！这就成功了。我甚至记得我偶然发现了这个

危险的HTML

，但没有解释它是怎么回事。