从wikipedia API中提取纯文本作为一段到我的网站

Question

我正在尝试从维基百科API获取关于柏林的文章的纯文本，并将其作为一段实现到我的网站上-所有这些都在ReactJs环境中

我有这个网址：链接到维基百科文章

它在浏览器中运行良好，然后尝试在下面的sanbox中获取数据：链接到沙箱

它通常与大多数API配合使用但在这里，我不知道该怎么办——在我得到对象的状态下，我实际上无法访问文章文本。例如，我可以访问URL地址，但这不是我想要的。

Answer 1

这是一个有效的解决方案。

https://codesandbox.io/s/nervous-nightingale-rwv2u

这里有几点需要你考虑：

• 您的查询URL末尾有一个"，这使得它没有返回结果
• 您需要提取结果的内容以将其显示在HTML中，这就是getFirstPageExtract函数的作用
• 从状态呈现HTML有其缺点，请阅读状态字符串中的呈现HTML

Answer 2

删除url'中的拼写错误

我还添加了loading和error状态，因为我认为处理loading和error状态是一种非常常见的做法。我还将您的内容制作成一个数组，并使用map渲染您的数组

请注意，我已经使用了dangerouslySetInnerHTML道具，众所周知，它对跨站点脚本(XSS(攻击非常危险。

import ReactDOM from "react-dom";
import React, { useState, useEffect } from "react";
const App = () => {
const [contents, setContents] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState();
const url =
"https://en.wikipedia.org/w/api.php?action=query&origin=*&prop=extracts&format=json&exintro=&titles=Berlin";
const extractAPIContents = (json) => {
const { pages } = json.query;
return Object.keys(pages).map(id => pages[id].extract);
}
const getContents = async () => {
let resp;
let contents = [];
setLoading(true);
try {
resp = await fetch(url);
const json = await resp.json();
contents = extractAPIContents(json);
} catch(err) {
setError(err);
} finally {
setLoading(false);
}
setContents(contents);
};
useEffect(() => {
getContents();
}, []);
if (loading) return 'Loading ...';
if (error) return 'An error occurred';
return (
<div>
<h1>Article</h1>
{contents.map(content => <div dangerouslySetInnerHTML={{ __html: content }} />)}
</div>
)
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

以下是一个工作演示：https://codesandbox.io/s/blissful-davinci-m5j9i?fontsize=14&隐藏导航=1&主题=深色