FCC Markdown Previewer 项目在负载测试中失败

如何解决FCC Markdown Previewer 项目在负载测试中失败

我正在尝试通过 Freecodecamp 项目。该项目是一个降价预览器，您可以在其中在 textarea 中输入代码并在网页上呈现它。除了两个，我所有的测试都通过了。它应该在加载时预览文本并且确实如此，但它会重新渲染，我不确定为什么。有人可以看看并告诉我我做错了什么。我将有一个指向我的 CodePen 的链接。我有两个未通过相同测试的解决方案。一种带有反应钩子，一种带有类组件。我正在为 html 解析器使用标记。谢谢！

我几乎确信它在组件中与 textarea 有关系，因为这是失败的测试之一，但我可以发现它有任何问题。

这是文本编辑器组件：

const Editor = ({ text,setText }) => {
  return (
    <>
      <textarea id='editor' value={ text } onChange={ (e) => setText(e.target.value) } />
    </>
  );
};

这是占位符为一串html的状态：

const [ text,setText ] = React.useState(placeholder);

CodePenLink

解决方法

您的 placeholder 里面有 html，而不是 markdown。您可以尝试使用这样的东西作为您的 placeholder，它应该可以工作


const placeholder = `
# Sample Markdown Header Level

## Sample Header Level 2

### Link

Here's a link to [Codepen](https://codepen.io).

### Code Block

1.  Open the file.
2.  Find the following code block on line 21:

        <html>
          <head>
            <title>Test</title>
          </head>

3.  Update the title to match the name of your website.

### Inline Code

I think you should use an \`<addr>\` element here instead.

### List

- First item
- Second item

### Blockquote

> Dorothy followed her through many of the beautiful rooms in her castle.

### Image

![Markdown Logo](https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/208px-Markdown-mark.svg.png "Markdown Logo")

### Bold Text

I just love **bold text**.
`;