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

我正在尝试构建RSS阅读器，其中有一组URL，单击其中一个可以加载所选内容的内容

我的尝试看起来像

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>
    )
  }
}  

import React from "react";

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

当我尝试加载它时，没有输出任何内容。然而，在

开发者工具>控制台上，我看到

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

我的代码可以在

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

更新

我将代码改为读取
response.text（）
，然后在
视图上执行以下操作

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

导出默认功能内容（道具）{
返回(
);
}

按照中的建议

然而，将结果作为输出的页面并不完全是它应该是怎样的


代码在

之所以会发生这种情况，是因为没有获取其他资产，如
css
，
图像

我怎样才能解决这个问题

返回响应.body

这一行实际上并没有给出正文中的数据。要访问正文中的数据，需要使用几个函数之一。看起来您要返回的数据只是一个文本文件，因此您需要执行
return response.text（）
。您可以在此处阅读有关从Fetch提取正文的更多信息：

您需要解决的另一个问题是，当您调用setState时，您正在将数据设置为
state.content
，但在渲染函数中，您希望它位于
this.state.data
。其中一个需要改变

应该使用response.text（）方法读取内容

看

Response.body
是一个
ReadableStream
，请看我更新了我的答案，谢谢你为什么不使用
.text（）
？我使用的是
Response.text（）
，这不是你想要的吗？结果有什么问题吗？我更新了我的答案，
Response.text（）
有帮助，但没有加载外部资产
loadData = (url) => {
  fetch(url)
    .then(function (response) {
      // console.log(url + " -> " + response.ok);
      if(response.ok){
        return response.text();
      }
      throw new Error('Error message.');
    })
    .then(function (data) {
      console.log("data: ", data);
      this.setState({ content: data });
    }.bind(this))
    .catch(function (err) {
      console.log("failed to load ", url, err.message);
    });
}