FluentUI DetailsList onColumnClick 与 React Hooks 给出空项目

Question

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

问题在于，当执行 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一个空数组。当您想按特定列对项目进行排序时，这显然是一个问题。

Answer 1

我认为 items 数组为空的原因是因为状态被“窃取”，请查看这篇文章：https ://css-tricks.com/dealing-with-stale-props-and-states-in-反应功能组件/

说实话，我不明白为什么会发生这种情况，可能是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} />;
};