Javascript forEach中的If/Else只添加了段落而不是标题,但在本地有效(React和Editor.js)

Javascript forEach中的If/Else只添加了段落而不是标题,但在本地有效(React和Editor.js),javascript,node.js,json,reactjs,Javascript,Node.js,Json,Reactjs,我希望有人能帮助我回答我的问题。 最近,我尝试重新构建我的仪表板以做出反应,这样我就可以将Editor.js用于我的博客内容,而不仅仅是一个文本区域 我以编辑的身份编写我的博客文章内容,在我的本地机器上,它工作起来就像做梦一样。我正在做的是写一篇文章,当我在仪表板中单击Create时,我从Editor.js运行.Save()函数。这为我提供了一个数组,其中包含来自编辑器的所有内容,以及对内容类型的描述。当我收到数组时,我将它发送到一个函数,在该函数中我循环遍历数组并将每个项目添加到一个字符串中,

我希望有人能帮助我回答我的问题。 最近,我尝试重新构建我的仪表板以做出反应,这样我就可以将Editor.js用于我的博客内容,而不仅仅是一个文本区域

我以编辑的身份编写我的博客文章内容,在我的本地机器上,它工作起来就像做梦一样。我正在做的是写一篇文章,当我在仪表板中单击Create时,我从Editor.js运行.Save()函数。这为我提供了一个数组,其中包含来自编辑器的所有内容,以及对内容类型的描述。当我收到数组时,我将它发送到一个函数,在该函数中我循环遍历数组并将每个项目添加到一个字符串中,这样我就可以在我的EJS blogpost文件中显示它

在我本地的机器上,这就像做梦一样。我能够过滤所有内容并将其添加到字符串中。这会导致我在事后查看时正确显示博客帖子但是当我把它上传到我的网站时,我只得到了段落。其他所有内容都将被过滤掉

我希望这里有人能帮我弄清楚为什么这是本地工作,但不是当我上传到我的网站。所有的功能似乎都在运行,但我的循环只会检测段落,而不会检测标题。因此,我最终得到的是一篇只有段落的博客文章

另一方面,我可以说,当我点击编辑一篇博客文章时,编辑器中的所有数据都显示正确,甚至是标题

这是我的函数,用于检测每个元素并将其添加到字符串中

convertArrayToString (savedContentData) {
    let dataString = "";
    savedContentData.blocks.forEach(function(item, idx) {
        if (item.type === "header" && item.data.level === 3) {
            dataString += '<h3 class="Headline3">' + item.data.text + '</h3>';
        } else if (item.type === "header" && item.data.level === 1) {
            dataString += '<h1 class="Headline1">' + item.data.text + '</h1>';
        } else if (item.type === "header" && item.data.level === 4) {
            dataString += '<h4 class="Headline4">' + item.data.text + '</h4>';
        } else if (item.type === "header" && item.data.level === 5) {
            dataString += '<h5 class="Headline5">' + item.data.text + '</h5>';
        } else if (item.type === "paragraph") {
            dataString += '<p class="Normal">' + item.data.text + '</p>';
        } else if (item.type === "code") {
            dataString += '<pre><code class="hljs">' + item.data.code +'</code></pre>';
        }
    });
    return dataString;
}
请注意,当您使用editor.js中的函数.Save()时,您将得到一个包含所有内容的数组,如下所示:

{
“时间”:1550476186479,
“区块”:[
{
“类型”:“标题”,
“数据”:{
“文本”:“Editor.js”,
“级别”:2
}
},
{
“类型”:“段落”,
“数据”:{
“文本”:“嘿,见见新的编辑器。在这个页面上,你可以看到它正在运行-尝试编辑这个文本。这个页面的源代码包含连接和配置的示例。”
}
},
{
“类型”:“标题”,
“数据”:{
“文本”:“关键功能”,
“级别”:3
}
},
{
“类型”:“列表”,
“数据”:{
“风格”:“无序”,
“项目”:[
“它是块样式的编辑器”,
“它返回JSON格式的干净数据输出”,
“设计为可扩展和可插拔,使用简单的API”
]
}
},
{
“类型”:“标题”,
“数据”:{
“文本”:“它是什么意思«块样式编辑器»”,
“级别”:3
}
},
{
“类型”:“段落”,
“数据”:{
“文本”:“经典编辑器中的工作区由单个contenteditable元素组成,用于创建不同的HTML标记。Editor.js工作区由单独的块组成:段落、标题、图像、列表、引号等。每个块都是独立的contenteditable元素(或更复杂的结构)由插件提供,由编辑器核心统一。”
}
}
],
“版本”:“2.8.1”
}

我终于解决了它,它是由一个愚蠢的错误引起的


在我的if-else声明中,我没有寻找h2。因为这是我在博客文章中使用的标题,所以没有保存,这就是为什么只显示段落。

我最终解决了这个问题,这是一个愚蠢的错误造成的

在我的if-else声明中,我没有寻找h2。因为这是我在博客文章中使用的标题,所以它们没有被保存,这就是为什么只显示段落

async onFormSubmit (e) {
    e.preventDefault();
    const savedContentData = await this.editorInstance.save();
    const contentDataString = await this.convertArrayToString(savedContentData);
    const newBlogPost = await fetch(URL + 'createblogpost', {
        method: 'POST',
        headers: {'Content-Type':'application/json'},
        body: JSON.stringify({ "blogPost": {
            "title" : this.state.title,
            "facebookTitle" : this.state.facebookTitle,
            "twitterTitle" : this.state.twitterTitle,
            "tags" : this.state.tags,
            "category" : this.state.category,
            "facebookDescription" : this.state.facebookDescription,
            "twitterDescription" : this.state.twitterDescription,
            "avatar" : this.state.avatar,
            "avatarId" : this.state.avatarId,
            "postIsPublic" : this.state.public,
            "contentRaw" : savedContentData,
            "content" : contentDataString
          }})
    });
    const newBlogPostJson = await newBlogPost.json();
    this.setState({ statusMessage: newBlogPostJson.message, resStatus: newBlogPostJson.messageType });
    this.props.updateBlogPosts();
}
    {
   "time": 1550476186479,
   "blocks": [
      {
         "type": "header",
         "data": {
            "text": "Editor.js",
            "level": 2
         }
      },
      {
         "type": "paragraph",
         "data": {
            "text": "Hey. Meet the new Editor. On this page you can see it in action — try to edit this text. Source code of the page contains the example of connection and configuration."
         }
      },
      {
         "type": "header",
         "data": {
            "text": "Key features",
            "level": 3
         }
      },
      {
         "type": "list",
         "data": {
            "style": "unordered",
            "items": [
               "It is a block-styled editor",
               "It returns clean data output in JSON",
               "Designed to be extendable and pluggable with a simple API"
            ]
         }
      },
      {
         "type": "header",
         "data": {
            "text": "What does it mean «block-styled editor»",
            "level": 3
         }
      },
      {
         "type": "paragraph",
         "data": {
            "text": "Workspace in classic editors is made of a single contenteditable element, used to create different HTML markups. Editor.js <mark class=\"cdx-marker\">workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc</mark>. Each of them is an independent contenteditable element (or more complex structure) provided by Plugin and united by Editor's Core."
         }
      }
   ],
   "version": "2.8.1"
}