小编Joo*_*ttk的帖子

FluentUI DetailsList onColumnClick 与 React Hooks 给出空项目

我正在尝试创建一个带有可排序列的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} …
Run Code Online (Sandbox Code Playgroud)

react-component react-functional-component office-ui-fabric-react fluent-ui

8
推荐指数
1
解决办法
3037
查看次数