时间戳

首页 > 解决方案 > 将 API 的输出导出为对象

javascript - 将 API 的输出导出为对象

问题描述

我刚刚开始使用 REACT 并使用 API。我正在尝试将 API 的输出保存到对象“obj”并将其导出（稍后从中提取我需要的内容并在 React 组件中使用它）。当我将对象导入另一个文件并尝试将其打印到控制台时，我得到“未定义”。我究竟做错了什么。这是代码：

const url= "someURL";
    
let obj;

fetch(url)
    .then(response => response.json())
    .then(data => obj = data)
    .then(() => console.log(obj))


export default {
    obj
};

在我导入“obj”的另一个文件中：

import React, { useEffect } from 'react';
import obj from './Api';

function Company() {

    useEffect(() => {

console.log(obj)

    });

    return (
        <div className="centered">Your data is: {JSON.stringify(obj)} </div>
    )
};

export default Company;

标签： javascriptreactjsapiobjectfetch

解决方案

您必须创建一个变量来指示数据是否已加载。

const url= "someURL";
    
let obj;
let loaded = false;

fetch(url)
    .then(response => response.json())
    .then(data => obj = data)
    .then(() => loaded = true)


export default {
    obj
};

然后，您必须将该值传递给您尝试呈现数据的组件。

render <Company loaded={loaded} />

然后当你渲染 comp

您应该执行以下操作：

import React, { useEffect } from 'react';


function Company() {

    useEffect(() => {

console.log(obj)

    });

    return (
        {props.loaded ? <div className="centered">Your data is: {JSON.stringify(obj)} </div> : "loading..."}
    )
};

export default Company;

如果您想在全球范围内导入和对象并管理它，而不必向下传递道具。我推荐使用 redux-thunk / redux-saga 来处理异步全局存储请求

推荐阅读