我尝试显示 api 数据但什么也没有显示，甚至在 React 上也没有错误

Question

我正在慢慢理解 React 的服务和抓取，但是当我尝试展示一些东西时，它什么也没给我展示。我放了代码以防有人能帮助我。也许我必须看看如何使用 JSON，我不知道。

let datosApi = [];

const recogerDatos = () => {
    let json = "https://jsonplaceholder.typicode.com/albums";
    let miApi = "http://localhost/dsw/api/";
    fetch(json)
        .then(data => data.json())
        .then(info => {
            console.log(info);
            this.datosApi = info;
        })
}

function Services() {
    return (
        <>
            {datosApi.map(datos => (
                <p>{datos.title}</p>
            ))}
        </>
    );

}
export default Services;

JSON 数据出现在 https://jsonplaceholder.typicode.com/albums

Answer 1

您正在显示列表中的数据

let datosApi = [];

但是，您似乎没有使用 API 中的数据填充您的列表，因为 recogerDatos() 方法从未被调用过。

Answer 2

我认为您的示例遗漏了某些内容，或者您还没有完成。

基本上有几点不对：

recogerDatos 从未被调用
datosApi 未声明，即使声明了，它也不是有状态的，因此不会导致 re-render 您的项目。

我创建了一个工作沙箱 here 显示它正在工作，代码如下：

const [result, setResult] = useState([]);
const recogerDatos = () => {
  let json = "https://jsonplaceholder.typicode.com/albums";
  fetch(json)
    .then((data) => data.json())
    .then((info) => {
      console.log(info);
      setResult(info);
    });
};

useEffect(() => {
  recogerDatos();
}, []);

return (
  <div className="App">
    {result.length > 0 && result.map((datos) => <p>{datos.title}</p>)}
  </div>
);

页面加载时调用 recogerDatos 函数（参见 useEffect），并在获取成功时更新结果。这会导致 re-render 并显示项目。

Answer 3

从您的代码来看，您似乎缺少一些核心 React 模式，例如状态管理和组件生命周期。由于 React re-renders 组件很多，你希望将获取的数据之类的东西存储到状态中，以避免它们不断地重置为初始值。当你想要获取数据时，你通常不想在每个 re-render 都这样做（那会导致大量的获取），相反你通常希望基于不同的事件触发它，例如当组件（将用于显示此数据）已安装。此类事情通常使用组件生命周期方法/useEffect 挂钩来确保它们在正确的时间点发生。我建议您阅读 React 文档并多学习一些基础知识，以便您在编码时能够理解主要概念，但这里有一个快速沙箱，其中包含一个示例，说明您如何在 React 中获得所需的效果： https://codesandbox.io/s/beautiful-frost-on9wmn?file=/src/App.js

我尝试显示 api 数据但什么也没有显示，甚至在 React 上也没有错误

I try to display api data but nothing comes out, not even an error on React

javascript

json

jsx

reactjs