我正在开发一个反应应用程序，该应用程序应该允许用户一次浏览一页数据库中的记录。
我正在使用功能组件和反应上下文来管理状态。 我有一个useEffect，它将从我的上下文中提取一个函数，从数据库中获取记录并将它们放入上下文状态。 该组件从上下文状态中提取记录数组，如果它们至少为 1(数组长度> 0(，它将使用每条记录映射数组以填充记录列表项组件。
数据被拉取，React 开发工具显示数据在上下文中。 我可以控制台将记录数组(带有记录(记录到控制台，甚至可以将作为记录列表项组件的元素列表
主要组成部分是：
<ul className="list-group">
{
records.length > 0
? (records.map((rec) => <RecordListItem record={rec}/>))
: (<li className="list-group-item">No Records Found</li>)
}
</ul>
记录列表中的使用效果为：
const {
filter,
getRecords,
page,
perPage,
records,
} = useContext(RecordsContext);
useEffect(() => {
const start = (page - 1) * perPage;
getRecords(start, perPage, filter); // filter, page, and perPage come from the Context
}, []); // only want this useEffect to run once when the component loads.
getRecords 是一个函数，用于查询数据库中的记录，从一条记录开始，一直到每页的记录数。
const getRecords = async (start, limit, filter) => {
if (filter) {
const items = await db("contacts").select()
.where({status: filter})
.offset(start).limit(limit);
} else {
const items = await db("contacts").select()
.offset(start).limit(limit);
}
dispatch({type: SET_RECORDS, payload: items);
记录显示在开发工具和控制台日志中。 我没有看到数据库连接或查询有问题。
我看到的唯一问题是，当上下文中的状态发生变化时，组件不会更新。 这只发生在这一个元素上。 其他状态值正在更改，使用它们的组件正在更新。
例如。 选取筛选器时，记录数将更新以反映使用该筛选器的记录总数。 在数据库中添加、更新和删除记录也会导致这些数字在刷新组件时更新。
我有另一个 useEffect，它将在页面或 perPage 更改时触发，另一个将页面重置为 1 并在过滤器更改时再次获取记录。 这两种 useEffects 目前都不在代码中，以避免它们导致问题。
父组件是记录查看器。 这只是一个容纳其他元素的外壳。 它在顶部创建一个导航栏，提供过滤器选项以及分页和每页项目选项以及带有容器的部分
记录列表是包含列表组元素并从上下文中获取数据的卡片。 然后，它映射提取的记录，并将每条记录传递给显示组件。
RecordsContextProvider 包装了 RecordsViewer，我可以在 React Dev Tools 的上下文中看到数据。 此外，执行console.log(records)确实会显示正确数量的项的数组。 我尝试捕获值中的记录映射，然后显示它，但没有变化。 我可以控制台.log该变量并看到它是"LI"类型的反应元素数组。
我完全不知道这里的挂断是什么。
我发现了这个问题。 在检查数组是否为空的条件中将长度拼写错误为长度。
我在睡眠不到 5 小时后尝试工作会得到什么。