javascript - 如何在 React 中加载外部 URL 的内容？

Question

我正在尝试在有一堆 URL 的地方构建 RSS 阅读器，然后单击其中一个加载所选内容的内容。

我的尝试看起来像

import React from "react";
import Listings from "./listings"
import Content from "./content"

const urls = [
  "https://www.washingtonpost.com/news/the-switch/wp/2017/10/17/googles-pixel-2-gives-you-the-best-of-android-if-you-can-find-it/?utm_term=.dacb8f419a4b",
  "https://arstechnica.com/gadgets/2017/10/windows-10-fall-creators-update-lots-of-small-changes-and-maybe-the-revolution/",
  "https://www.theverge.com/2017/10/17/16481628/microsoft-surface-book-2-price-release-date-specs-availability-processor"
];

export default class RSS extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      selectedUrl: urls[0],
      urls: urls,
      content: "TBD"
    }
  }

  onUrlSelect = (e, url) => {
    e.preventDefault();
    //console.log("selected Url Index: ", url);
    this.setState({selectedUrl: url});

  }

  componentWillMount() {
    this.loadData(this.state.selectedUrl);
  }

  loadData = (url) => {
    fetch(url)
      .then(function (response) {
        console.log(url + " -> " + response.ok);
        return response.body;
      })
      .then(function (data) {
        console.log("data: ", data);
        this.setState({ content: data });
      }.bind(this))
      .catch(function (err) {
        console.log("failed to load ", url, err.stack);
      });
  }

  render() {
    return (
      <div>
        <Listings urls={this.state.urls} onUrlSelect={this.onUrlSelect}/>
        <Content data={this.state.data}/>
      </div>
    )
  }
}  

Content 的样子

import React from "react";

export default function Content(props) {
  return (
    <div>
      <p> Loading: {props.data} </p>
    </div>
  );
}

当我尝试加载它时，没有打印出任何内容。但是，在 Developer Tools > Console 上，我看到了

data:  ReadableStream {}locked: (...)__proto__: Object
index.js? [sm]:35  

我的代码在 https://codesandbox.io/s/wkwm8z3xl 上可用

我不确定我做错了什么，非常感谢任何帮助。谢谢

更新
我将我的代码更改为读取 response.text() 然后在 view 上我做了以下

export default function Content(props) {
  return (
    <div>
      <div dangerouslySetInnerHTML={{__html: props.data}}/>
    </div>
  );
}

按照 https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml 中的建议

然而，页面输出的结果并不完全是它应该的样子

代码更新于 https://codesandbox.io/s/wkwm8z3xl
发生这种情况是因为未获取其他 Assets ，如 css、images。

我该如何解决这个问题？

Answer 1

return response.body

这一行实际上并没有给你正文中的数据。要访问正文中的数据，您需要使用几个函数之一。看起来您要返回的数据只是一个文本文件，因此您需要执行 return response.text()。您可以在此处阅读有关从 Fetch 中提取正文的更多信息:https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Body

您需要解决的另一件事是，当您调用 setState 时，您将数据设置到 state.content 上，但随后在您的渲染函数中您期望它是在 this.state.data 上。两者都需要改变。