Question

我正在开发一个反应应用程序，该应用程序应允许用户一次浏览数据库中一页的记录。

我正在使用功能组件并对上下文进行响应以管理状态。我有一个useEffect，它将从我的上下文中提取一个函数以从数据库中获取记录，并将它们放入上下文状态。该组件从Context State中拉出记录数组，如果它们至少为1（数组长度> 0），它将使用每个记录映射该数组以填充记录列表项组件。

数据被拉出，React Dev Tools显示数据在上下文中。我可以将记录数组（带有记录）控制台记录到控制台，甚至可以将作为记录列表项组件的

元素列表记录到控制台，但是页面始终显示“无记录”找到”消息，如果数组为空（长度为0），则应该得到此消息。

主要成分是：

<ul className="list-group">
   {
      records.length > 0
      ? (records.map((rec) => <RecordListItem record={rec}/>))
      : (<li className="list-group-item">No Records Found</li>)
   }
</ul>

RecordsList中的useEffect是：

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并在过滤器更改时再次获取记录的useEffect。目前，这两个useEffects均不在代码中，以避免它们引起问题。

父组件是RecordsViewer。这只是一个用于容纳其他元素的外壳。它在顶部创建一个导航栏，该导航栏提供过滤器选项，分页和每页项以及带有容器的部分

RecordsList是一张包含List-Group元素并从Context获取数据的卡。然后，它将映射到提取的记录，并将每个记录传递到显示组件。

RecordsContextProvider包装了RecordsViewer，我可以在React Dev Tools的Context中看到数据。同样执行console.log(records)也会显示正确数目的项目的数组。我尝试捕获一个值中的记录图，然后显示它，但没有任何变化。我可以在console.log上看到该变量，并看到它是类型为“ LI”的react元素的数组。

我对这里的挂断完全迷失了。

Answer 1

我找到了问题。在检查数组是否为空的条件下，长度长度拼写错误。

睡眠少于5个小时后我尝试工作所得到的东西。

当上下文状态更改时，React hooks上下文组件不会重新呈现

1 个答案: