Javascript 将WikipediaAPI中的纯文本作为段落提取到我的网站

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

我有这个网址：

在浏览器中工作正常，然后尝试获取数据，如下面的sanbox：

这通常适用于大多数API

---

但在这里，我不知道该怎么办——在这个状态下，我得到了一个我实际上无法到达文章文本的对象。例如，我可以访问URL地址，但这不是我想要的

这里有一个有效的解决方案

以下几点需要您考虑：

• 您的查询URL末尾有一个“0”，因此它不会返回任何结果
• 您需要提取结果的内容以在HTML中显示它们，这就是getFirstPageExtract函数的作用
• 从状态呈现HTML有其缺点，请阅读

---

删除url中的打字错误

“

我还添加了

加载

和

错误

状态，因为我认为处理

加载

和

错误

状态是非常常见的做法。我还将您的内容制作成一个数组，并使用

map

请注意，我使用过道具，众所周知，跨站点脚本（XSS）攻击非常危险

从“react-dom”导入ReactDOM；
从“React”导入React，{useState，useffect}；
常量应用=（）=>{
const[contents，setContents]=useState（[]）；
const[loading，setLoading]=useState（false）；
const[error，setError]=useState（）；
常量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；
返回Object.keys（pages）.map（id=>pages[id].extract）；
}
const getContents=async（）=>{
让我们分别；
让内容=[]；
设置加载（真）；
试一试{
resp=等待获取（url）；
const json=await resp.json（）；
contents=extractAPIContents（json）；
}捕捉（错误）{
设置错误（err）；
}最后{
设置加载（假）；
}
设置内容（contents）；
};
useffect（（）=>{
getContents（）；
}, []);
如果（加载）返回“加载…”；
如果（错误）返回“发生错误”；
返回(
文章
{contents.map（content=>）}
)
};
const rootElement=document.getElementById（“根”）；
ReactDOM.render（
谢谢！你是我的上帝：）：…现在只需要读100遍就可以理解这里发生了什么，我们很好：）再次感谢！谢谢这也是一个很好的解决方案，……上帝。。。。我觉得我现在的反应太弱了：（，非常感谢大家的关注！如果你不理解代码中的任何内容，请随时问我。：）这只是一个例子，当然，在
产品中
在使用
危险的SetinenerHTML
和访问对象属性之前，您会三思而后行。请将代码等放在问题中，而不是链接到沙盒
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);