如何在React.js中获得异步数据到全局数组?

Question

我想从Firestore插入异步数据到React元素中。我有几个函数来处理这个流。

getEvents()是一个异步函数，它返回一个对象数组，这些对象是我从Firestore中获得的数据。

const getEvents = async() => {
try {
const data = query(collection(db, id));
const events = [];
const snapshot = await getDocs(data);
snapshot.forEach((doc) => events.push(doc.data()));
return events;
} catch(error) {
console.error(error);
}
}

这个函数在receiveEvents()中被引用，我将返回的数据放入全局数组中，以便在DOM中使用它。

let userEvents = [];
const receiveEvents = () => {
getEvents()
.then(result => userEvents = result)
.catch(error => console.error(error));

该函数在displayEvents()中用于将返回的数据粘贴到所需的元素中。该函数在点击按钮时调用。

const displayEvents = () => {
try {
const btnContainer = document.querySelector(".btn-container");
ReactDOM.render(<AppNavigation />, btnContainer);
receiveEvents().then(() => { return userEvents }); 
} catch(error) {
console.error(error);
}
}

我得到一个错误index.js:1 TypeError: Cannot read properties of undefined (reading 'then') @ displayEvents。

这些函数使用登录的用户ID访问数据库中的正确目录。我在文件顶部声明的给定函数中检索ID。

let id = null;
const getUserId = () => {
try {
console.log("getUserId()");
return auth.currentUser.uid;
} catch(error) {
console.error(error);
}
}

<AppNavigation/>组件返回div，即

<div className="arrow-navigation-container">
<button className="arrow-btn"><span className="icon arrow">arrow_back</span></button> 
<button className="arrow-btn"><span className="icon arrow">arrow_forward</span></button>
</div>

我能做些什么来获得异步数据进入userEvents数组，所以我可以在请求时向用户显示它?

Answer 1

我个人会使用钩子:

• useState用于存储数据
• 触发数据抓取的useEffect
• 使用econtext为需要数据的组件提供数据。

如何使用这些钩子的例子:https://reactjs.org/docs/hooks-reference.html#usestate

useState会像useContext Provider一样进入到同一个组件中，通常在示例应用中它是在component中。需要数据的组件必须是Context的子组件。提供者，但它不需要是一个直接子。

useEffect也指向相同的组件，通过依赖关系，你可以决定是否只获取一次数据，或者当ID发生变化时。