Question

我正在尝试构建RSS阅读器，其中有一堆URL，并且单击其中一个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>
    )
  }
}

Content看起来像

import React from "react";

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

当我尝试加载它时，Nothing打印出来。但是，在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更新之所以发生这种情况，是因为未提取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，但随后在您的渲染函数中，您希望它在{{1}上}。其中一个或另一个需要改变。

Answer 2

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

请参阅https://developer.mozilla.org/en-US/docs/Web/API/Response

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

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

2 个答案: