Node.js React-尝试将获取的数据保存在变量中，但该变量返回空

我使用async await获取json数据，我希望将获取的数据保存在一个变量中，以便能够将其与组件中的映射一起使用， 数据正确地进入函数内部-我用警报进行了检查，并且在函数内部的变量中，它确实显示了所有数据，但不知何故，函数外部的变量返回为空。 下面是一些代码： 以下代码中的两个警报都返回正确的数据

export let fetchPosts = [];
export async function FetchPosts() {
    await axios.get('https://jsonplaceholder.typicode.com/posts').then(
        res => {
            alert(JSON.stringify(res.data))
            fetchPosts = JSON.stringify(res.data);
            alert(fetchPosts)
        }
    ).catch(err => {
        alert('err');
    })
}

从“../services/post”导入{fetchPosts}；
从“../services/post”导入{FetchPosts}；
导出默认函数Posts（）{
函数clickme（）{
FetchPosts（）
}
返回(
点击我
{fetchPosts.map（（post，index）=>(
{post.title}
{post.body}
))}
)
}

状态是问题所在 React不会自动重新加载您的singleton

fetchPosts

。 相反，试试

export function FetchPosts() {
    return axios.get('https://jsonplaceholder.typicode.com/posts');
}

然后

从'react'导入{useState}；
从“../services/post”导入{FetchPosts}；
导出默认函数Posts（）{
const[posts，setPosts]=useState（[]）；
函数clickme（）{
FetchPosts（）。然后（res=>{
设置柱（res.data）；
});
}
返回(
点击我
{posts.map（（post，index）=>(
{post.title}
{post.body}
))}
)
}

如果您想要全局状态，这是另一个您应该完全深入研究的主题，但是您可以使用单例来实现它，您只需要将它与挂钩和事件发射器结合起来。我这里有一个黑客版本，但您可能应该坚持使用redux、mobx或AppContext，这是一种更流行的模式。

状态是问题所在 React不会自动重新加载您的singleton

fetchPosts

。 相反，试试

export function FetchPosts() {
    return axios.get('https://jsonplaceholder.typicode.com/posts');
}

然后

从'react'导入{useState}；
从“../services/post”导入{FetchPosts}；
导出默认函数Posts（）{
const[posts，setPosts]=useState（[]）；
函数clickme（）{
FetchPosts（）。然后（res=>{
设置柱（res.data）；
});
}
返回(
点击我
{posts.map（（post，index）=>(
{post.title}
{post.body}
))}
)
}

---

如果您想要全局状态，这是另一个您应该完全深入研究的主题，但是您可以使用单例来实现它，您只需要将它与挂钩和事件发射器结合起来。我这里有一个黑客版本，但您可能应该坚持使用redux、mobx或AppContext，这是一种更流行的模式。

React是在您获取数据之前进行渲染，然后在数据更改时没有任何命令它重新渲染。您需要一个使用状态和效果挂钩的更全面的解决方案。React在获取数据之前进行渲染，然后在数据更改时没有任何命令它重新渲染。你需要一个使用状态和效果挂钩的更全面的解决方案。FetchPost上的

async

关键字在这里有什么区别吗？我尝试过这样做，但通过我发现了一个错误：TypeError:services\u post\u WEBPACK\u IMPORTED\u MODULE\u 1\u FetchPosts.then不是function@H肯利德：你是对的。我不小心忘了这个。我纠正了我的错误。哈肯是对的。@Mindy ha-ha找到了它并改正了。我在没有函数的情况下调用了它。更新。FetchPost上的

async

关键字在这里有什么区别吗？我尝试过这样做，但通过我发现了一个错误：TypeError:services\u post\u WEBPACK\u IMPORTED\u MODULE\u 1\u FetchPosts.then不是function@H肯利德：你是对的。我不小心忘了这个。我纠正了我的错误。哈肯是对的。@Mindy ha-ha找到了它并改正了。我在没有函数的情况下调用了它。更新。

import { useState } from 'react';
import { FetchPosts } from '../services/post';

export default function Posts() {
    const [posts, setPosts] = useState([]);
    function clickme() {
        FetchPosts().then(res => {
          setPosts(res.data);
        });
    }
    return (<>
        <button onClick={clickme}>Click me</button>
        {posts.map((post, index) => (
            <div key={post.id} className="card" style={{ width: '16rem', display: 'inline-block', margin: '5px' }}>
                <div className="card-body">
                    <h6 className="title">{post.title}</h6>
                    <p className="card-text">{post.body}</p>
                </div>
            </div>
        ))}
    </>)
}