javascript - How to load content for external URL in React? - Stack Overflow

admin 管理员组

文章数量: 1086019

I am trying to build RSS reader where there are a bunch of URLs and clicking on one of them loads the content for the selected content.

My attempt looks like

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

const urls = [
  "/?utm_term=.dacb8f419a4b",
  "/",
  ""
];

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

  }

  ponentWillMount() {
    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>
    )
  }
}  

Where Content looks like

import React from "react";

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

When I try to load it, Nothing prints out. However, on the Developer Tools > Console, I see

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

My code is available on

I am not sure what I am doing wrong, any help is highly appreciated. Thanks

update
I changed my code to read response.text() and then on the view I did the following

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

as remended in .html#dangerouslysetinnerhtml

However, the page the results as output is not exactly how it should be

The code is updated at
This is happening because the other assets like css, images are not fetched.

How can I fix this?

I am trying to build RSS reader where there are a bunch of URLs and clicking on one of them loads the content for the selected content.

My attempt looks like

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

const urls = [
  "https://www.washingtonpost./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./gadgets/2017/10/windows-10-fall-creators-update-lots-of-small-changes-and-maybe-the-revolution/",
  "https://www.theverge./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});

  }

  ponentWillMount() {
    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>
    )
  }
}  

Where Content looks like

import React from "react";

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

When I try to load it, Nothing prints out. However, on the Developer Tools > Console, I see

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

My code is available on https://codesandbox.io/s/wkwm8z3xl

I am not sure what I am doing wrong, any help is highly appreciated. Thanks

update
I changed my code to read response.text() and then on the view I did the following

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

as remended in https://reactjs/docs/dom-elements.html#dangerouslysetinnerhtml

However, the page the results as output is not exactly how it should be

The code is updated at https://codesandbox.io/s/wkwm8z3xl
This is happening because the other assets like css, images are not fetched.

How can I fix this?

• javascript
• reactjs
• fetch

Share Improve this question Follow edited Oct 18, 2017 at 15:51 daydreamer asked Oct 18, 2017 at 3:30 daydreamerdaydreamer 92.2k204204 gold badges473473 silver badges750750 bronze badges 13

• Response.body is a ReadableStream, see Streams standard – guest271314 Commented Oct 18, 2017 at 4:14
• I updated my answer, thanks – daydreamer Commented Oct 18, 2017 at 15:52
• Why do you not use .text()? – guest271314 Commented Oct 18, 2017 at 15:56
• I am using response.text(), is that not what you are asking for as well? – daydreamer Commented Oct 18, 2017 at 15:59
• What is the issue with result? – guest271314 Commented Oct 18, 2017 at 16:01

 |  Show 8 more ments

2 Answers 2

Sorted by: Reset to default 2

return response.body

This line doesn't actually give you the data in the body. To get access to the data in the body, you'll need to use one of a couple functions. It looks like the data you're getting back is just a text file, so you'll want to do return response.text(). You can read more about extracting the body from Fetch here: https://developer.mozilla/en-US/docs/Web/API/Fetch_API/Using_Fetch#Body

One other thing you'll need to fix is that when you call setState, you're setting the data onto state.content, but then in your render function you're expecting it to be on this.state.data. One or the other will need to change.

You should use response.text() method to reads content.

See https://developer.mozilla/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);
    });
}

本文标签： javascriptHow to load content for external URL in ReactStack Overflow