javascript - 当上下文状态改变时，React hooks 上下文组件不会重新渲染

问题描述

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

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

数据被拉取，React 开发工具显示数据在 Context 中。我可以控制台将记录数组（带有记录）记录到控制台，我什至可以记录

元素是控制台的记录列表项组件，但页面始终显示“未找到记录”消息，如果数组为空（长度为 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 并在过滤器更改时再次获取记录。这两个 useEffects 目前都没有在代码中以避免它们引起问题。

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

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

RecordsContextProvider 包装了 RecordsViewer，我可以在 React 开发工具的上下文中看到数据。同样做 aconsole.log(records)确实显示了正确数量的项目的数组。我尝试在一个值中捕获记录映射，然后显示它，但没有变化。我可以 console.log 该变量并看到它是“LI”类型的反应元素数组。

我完全不知道这里的挂断是什么。

标签： javascriptarraysreactjsreact-context

javascript - 当上下文状态改变时，React hooks 上下文组件不会重新渲染

问题描述

解决方案

推荐阅读