React -试图将获取的数据保存在变量中，但变量返回空

Question

我用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');
})
}

import { fetchPosts } from '../services/post';
import { FetchPosts } from '../services/post';
export default function Posts() {
function clickme() {
FetchPosts()
}
return (<>
<button onClick={clickme}>Click me</button>
{fetchPosts.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>
))}
</>)
}

Answer 1

问题在哪里

React不会自动重新加载你的单例fetchPosts。相反,尝试…

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

然后

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

https://codesandbox.io/s/jolly-almeida-q4331?fontsize=14& hidenavigation = 1,黑暗主题=

如果你想要全局状态，那是另一个你应该深入研究的话题，但你可以用单例来做，你只需要把它与钩子和事件发射器结合起来。我这里有一个hack版本https://codesandbox.io/s/react-typescript-playground-forked-h8rpu但你应该坚持使用redux或mobx或AppContext，这是一个更流行的模式。