javascript - 将 HTML 解析为异步调用的响应

Question

我正在进行异步调用并收到 HTML 响应。问题是，当我尝试将其设置为元素的 dangerouslySetInnerHtml 时，我得到了 [object Response]。我想这是有道理的。但是当我尝试解析它时，我得到了[object HTMLDocument]。这是我的代码:

import React, { useState } from 'react';
import { DictionaryMoreButton } from '../DictionaryMoreButton';
import { SearchBar } from '../SearchBar';

export const Dictionary = ({ initialData }) => {
  const [searchBarValue, setSearchBarValue] = useState('');
  const [startValue, setStartValue] = useState(0);
  const [vocabularyData, setVocabularyData] = useState(initialData);
  const getResultForItem = searchQuery => fetch(`https://learngerman.dw.com/learngerman/search?languageCode=en&item=${searchQuery}&start=${startValue}&rows=12`).then(r => {
    const parser = new DOMParser();
    return parser.parseFromString(r, 'text/html');
  }).catch(error => console.log(error));

  return (
    <div className="container page-container">
      <div className="section">
        <div className="row">
          <div className="col-xs-12">
            <header>
              <SearchBar
                handleChange={async e => {
                  const result = await getResultForItem(e.target.value, 0);
                  console.log(result);
                  setSearchBarValue(result);
                }}
                handleKeyPress={async e => e.key.toLowerCase() === 'enter' && setVocabularyData(await getResultForItem(searchBarValue))}
              />
              <div className="section exercise-container vocabulary copy">
                <div className="vocabularies" dangerouslySetInnerHTML={{ __html: vocabularyData }}/>
                <DictionaryMoreButton
                  handleClick={async () => {
                    setStartValue(startValue + 12);
                    setVocabularyData(vocabularyData + await getResultForItem(searchBarValue));
                  }}
                />
              </div>
            </header>
          </div>
        </div>
      </div>
    </div>
  );
};

如何解析它？我运行了一个 CURL 并得到了一个很长的 HTML 答案，所以不会在这里发布它，但它是有效的 HTML。我知道如果是 JSON，我可以执行 res.json() 。 HTML 有类似的东西吗？

Answer 1

But when I try to parse it, I get [object HTMLDocument]

How can I parse it?

您已经解析了它。这就是为什么您得到的是 HTML 文档而不是字符串。

The problem is when I try to set it as an element's dangerouslySetInnerHtml

dangerouslySetInnerHtml 希望您传递未解析的 HTML，而不是已解析的 DOM。

您可以使用the text method (您将使用 json 方法解析 JSON)从响应中获取 HTML 源代码。