javascript - 为什么在使用上下文 API 从 MongoDB 获取数据时，ReactJS 中会记录一个空数组？

Question

我在我的 ReactJS 应用程序中使用上下文 API 从 MongoDB 获取数据。当我将数据记录到网页时，我得到了三个数组而不是一个。我不确定为什么会这样。

这是我的代码:

在 RoomProvider.js 文件中:

我已经使用 React.createContext 创建了一个上下文。 在 RoomProvider 的构造函数中，我已经用用户、房间、sortedRooms、featuredRooms 和 loading 初始化了状态。 我使用 axios 通过两种不同的方法从 MongoDB 获取数据——getRooms() 和 getUsers()。 我有一个返回特定房间的 getRoom() 方法。 在 componentDidMount() 中，我调用 getRooms() 并将加载设置为 false。 在 render() 方法中，我将 state 和 getRoom() 方法提供给上下文提供者。 在 RoomContainer.js 文件中:

我正在使用 withRoomConsumer() 高阶组件使用上下文。 我正在将房间数组记录到控制台。 当我运行该应用程序时，控制台显示一个空数组被记录了三次，而不是一个数组。我不确定为什么会这样。

有人可以帮我理解为什么我看到一个空数组被记录了三次吗？这是我的代码:

(包括 RoomProvider.js、RoomContainer.js 和任何其他相关文件的代码。)

Answer 1

它似乎按预期工作，您看到 3 个日志，因为该组件已渲染 3 次。

1. 第一次呈现 - 没有数据，因为提取(在 componentDidMount) 还没有被触发。
2. 第二次渲染 - 状态已更新(使用 loading: false)并获取 已触发，但调用尚未完成，因此仍然没有数据。
3. 第三次渲染 - 返回的数据和更新的状态，现在你有 数据。