FluentUI DetailsList onColumnClick 与 React Hooks 提供空项目答案

【问题标题】：FluentUI DetailsList onColumnClick with React Hooks gives empty ItemsFluentUI DetailsList onColumnClick 与 React Hooks 提供空项目
【发布时间】：2020-10-03 23:17:04
【问题描述】：

我正在尝试创建一个带有可排序列的 DetailsList（类似于此处文档中的示例：https://uifabric.azurewebsites.net/#/controls/web/detailslist），但我想使用功能组件和钩子而不是 Class 组件。

问题是onColumnClick函数在执行时，“items”数组还是空的。

这基本上是我的组件的设置：

const MyList= () => {
  const [items, setItems] = useState([]);
  const [columns, setColumns] = useState([]);

  useEffect(() => {
    const newItems = someFetchFunction()
    setItems(newItems);

    const newColumns= [
      {
        key: "column1",
        name: "Name",
        fieldName: "name",
        onColumnClick: handleColumnClick,
      },
      {
        key: "column2",
        name: "Age",
        fieldName: "age",
        onColumnClick: handleColumnClick,
      },
    ];
    setColumns(newColumns);
  }, []);

  const handleColumnClick = (ev, column) => {
    console.log(items); // This returns [] instead of a populated array.
  };

  return <DetailsList items={items} columns={columns} />;
};

问题在于handleColumnClick 中的items 返回一个空数组。当您想按特定列对项目进行排序时，这显然是一个问题。

【问题讨论】：

我也遇到了同样的问题，请问您有什么想法吗？

标签： react-component react-functional-component fluent-ui office-ui-fabric-react

【解决方案1】：

我认为 items 数组为空的原因是因为 state 被“窃取”了，看看这篇文章：https://css-tricks.com/dealing-with-stale-props-and-states-in-reacts-functional-components/

说实话，我不明白为什么会这样，可能onColumnClick是异步处理的？！

但是添加一个useRef 钩子为我解决了这个问题：

const MyList = () => {
  const [columns, setColumns] = useState([]);
  const [items, setItems] = useState([]);
  const refItems = useRef(items);

  const updateItems = (newItems) => {
    refItems.current = newItems;
    setItems(newItems);
  }

  useEffect(() => {
    const newItems = someFetchFunction()
    updateItems(newItems);

    const newColumns = // ...
    setColumns(newColumns);
  }, []);

  const handleColumnClick = (ev, column) => {
    console.log(refItems.current);
  };

  return <DetailsList items={items} columns={columns} />;
};

【讨论】：