将 API 的输出导出为对象

Question

我刚刚开始使用 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;

Answer 1

您必须创建一个变量来指示何时加载数据。

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} />

然后当你渲染合成

你应该做这样的事情：

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 来处理异步全局存储请求