0

使用 Fluent UI DetailsList，我创建了这个解决方案。我已经删除了所有不必要的行以最小化问题，因为它似乎在登录时以onColumnClick某种方式不会打印当前状态而是初始状态，为什么会发生这种情况：

import * as React from 'react';
export const ClvKkcgListyHistorie = (props: IClvKkcgListyHistorieWebPartProps) => {
const [notifications, setNotifications] = React.useState<INotificationDetailsList[]>([]);
const [columns, setColumns] = React.useState<IColumn[]>();

React.useEffect(() => {
  setColumns(createColumns(onTitleClick, onColumnClick));
}, []);

// With this useEffect everything works fine
React.useEffect(() => {
  setColumns(createColumns(onTitleClick, onColumnClick));
}, [notifications]);

React.useEffect(() => {
  const fetchAllNotifications = async () => {
   // Fetch items here
  }
  fetchAllNotifications();
}, [])


const onColumnClick = (e: any, column: IColumn) => {
  console.log(notifications,columns, "1" ); 
  // Here I get [], undefined, "1"
}

return (
  <>
  {notifications.length !== 0 && 
    <DetailsList 
      items={notifications} 
      columns={columns}
    >
    </DetailsList>
  }
  </>
);
}

列.tsx

import * as React from 'react';


export const createColumns = (onTitleClick: any, onColumnClick: any) : IColumn[] => {
  return [
    {
      key: "title", 
      name: "Nadpis", 
      minWidth: 70,
      maxWidth: 100,
      isResizable: true,
      isRowHeader: true,
      isSorted: false,
      isSortedDescending: false,
      sortAscendingAriaLabel: 'A - Z',
      sortDescendingAriaLabel: 'Z - A',
      isPadded: true,
      onColumnClick: onColumnClick,
      onRender: (item: INotificationDetailsList) => {
        return <span>{item.Title}</span>;
      }
    },

    }
  ]
}

在那里面

4

1 回答 1

0

当你渲染你的组件时，它会创建这个函数onColumnClick并查看此刻的列。它将该函数传递给处理程序，记住那些列是什么。（在您的情况下，是一个空数组。）

为了在列更新时更新函数，您需要使用useCallback. 它与 类似useEffect，但只要依赖关系发生变化，就会返回一个函数而不是运行一个函数。

const onColumnClick = React.useCallback((e: any, column: IColumn) => {
  console.log(notifications,columns, "1" ); 
  // This will return a different function to the handlers
  // whenever columns changes, but not notifications
}, [columns])
于 2020-12-07T14:12:39.900 回答