在 nextjs 中计算流利的 ui 详细信息列表的组的位置答案

【问题标题】：Where to calculate groups for fluentui detaillist in nextjs在 nextjs 中计算流利的 ui 详细信息列表的组的位置
【发布时间】：2021-03-18 21:19:38
【问题描述】：

我正在学习反应，并给出了这个使用 SWR 从 API 获取一些项目并使用 fluentuiDetailedList 显示带有组的项目的简单示例 - 我遇到了组问题。

每当我单击 UI 中的组以折叠/取消折叠时，这似乎会触发重新渲染，然后组件将再次 createGroups(data) 在重新计算组对象时将 UI 再次重置为原始状态。

我应该在哪里实际存储/计算我的数据的组信息？最初需要创建它，但从那里似乎只需要在 swr api 返回新数据时重新评估它 - 然后我仍然希望从用户可能已更改的折叠组中合并当前状态在用户界面中。

是因为我不应该使用 SWR，因为它会实时刷新数据 - 并且只能在页面刷新时使用？

const SWR = ({ children, listid, onSuccess }: { children: ((args: SWRResponse<any, any>) => any), listid: string, onSuccess?: any }) => {
  const url = `http://localhost:7071/api/Lists/${listid}`;
  console.log(url);
  const {data,error } = useSWR(url, { fetcher: fetcher, isPaused: () => listid === undefined, onSuccess });

  const items = data.value;
  const groups = createGroups(data)

  return <... DetailsList group={groups} items={items} ... >; // ... left out a few details ...
};

【问题讨论】：

也可能是潜在的问题，即每当用户单击 group 上的collapse 时，swr 都会刷新数据作为重新渲染的一部分 - 这是人们想要的吗？

标签： reactjs next.js fluent-ui

【解决方案1】：

如果添加一个用于保存组的状态和一个用于数据更改时的 useEffect 以及在 useEffect 中添加，您应该在更新 groupState 之前检查内容是否已更改。

const hasChanged(data) => {
    return data.notEquals(state.data)); // write your own logic for comparing the result
};
useEffect(() => { if (hasChanged(data)) { 
    setState(prev=> ({ ...prev, group: createGroup(data), data: data });
}}, [data]);

您实际上不需要存储组，您可以只将数据保存在您的状态中，但重要的部分是能够在更改状态之前检查是否确实发生了任何更改。

另一个值得尝试的是 useSWR 挂钩中的比较选项。因此，与其将“hasChanged”逻辑放在 useEffect 挂钩中，不如将其放在比较函数中。不过还没有机会亲自测试一下。

第三种也是最后一种选择是将组的创建放在您的 fetcher 中。对于这种特殊情况，也许是最直观的解决方案，尽管我不完全确定它会防止不必要的重新渲染。

const fetcher = url => axios.get(url).then(res=> {
    return {
      items: res.data.value,
      groups: createGroups(res.data),
    };
});

const SWR = ({ children, listid, onSuccess }: { children: ((args: SWRResponse<any, any>) => any), listid: string, onSuccess?: any }) => {
  const { data, error } = useSWR(url, fetcher, ...);
  return <... DetailsList group={data.groups} items={data.items} ... >; // ... left out a few details ...
};

【讨论】：