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，{useffect}来自“React”；
从“/Api”导入对象；
职能公司（）{
useffect（（）=>{
控制台日志（obj）
});
返回(
您的数据是：{JSON.stringify（obj）}
)
};
出口违约公司；

必须创建一个变量，用于指示何时加载数据或何时未加载数据

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;

import React，{useffect}来自“React”；
职能公司（）{
useffect（（）=>{
控制台日志（obj）
});
返回(
{props.loaded？您的数据是：{JSON.stringify（obj）}：“正在加载…”
)
};
出口违约公司；

---

如果您想导入、对象并全局管理它，而不必传递道具。我建议对异步全局存储请求使用redux-thunk/redux-saga

您无法同步访问异步检索的数据

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;