我正在尝试构建 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
我的代码可以在 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
等其他资源。
我该如何解决这个问题?
最佳答案
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
上。其中之一需要改变。
关于javascript - 如何在 React 中加载外部 URL 的内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46802329/