Fluent UI React 状态始终重置为默认值

问题描述

我在单击列标题时显示一个下拉菜单，但在事件处理程序中，所有状态都重置为初始值。

我按如下方式构建 DetailsLis：

<ShimmeredDetailsList
                setKey="set"
                items={props.items}
                columns={columns}
                onRenderItemColumn={_renderItemColumn}
                enableShimmer={serviceListLoading}
                ariaLabelForShimmer="Content is being fetched"
                ariaLabelForGrid="Item details"
                selectionMode={SelectionMode.none}
                onItemInvoked={_onItemInvoked}
                onColumnHeaderContextMenu={_onColumnHeaderContextMenu}
                ariaLabelForSelectionColumn="Toggle selection"
                // onActiveItemChanged={this.rowSelectChange}
                //onColumnHeaderClick={this._onColumnClick} /*How does this event handler work?!?!*/
                ariaLabelForSelectAllCheckBox="Toggle selection for all items"
                checkButtonAriaLabel="Row checkBox"
            />
            <ContextualMenu {...contextMenuProps}></ContextualMenu>

只要我点击列标题，函数 _onColumnHeaderContextMenu 就会被调用，如下所示：

const _onColumnHeaderContextMenu = (column,ev) => {

        // const { key } = column;

        console.log(props.items);
        debugger;

        const items = [
            {
                key: 'aToZ',name: 'A to Z',iconProps: { iconName: 'SortUp' },canCheck: true,onClick: (ev) => {

                    ev.currentTarget.checked = true;

                }
            },{
                key: 'zToA',name: 'Z to A',iconProps: { iconName: 'SortDown' },checked: column.isSorted && column.isSortedDescending,}
        ];

         const properties = {
            items: items,target: ev.currentTarget,directionalHint: DirectionalHint.bottomLeftEdge,gapSpace: 10,isBeakVisible: true,ondismiss: onContextualMenudismissed
        }

        setContextMenuProps(properties);


    }

props.items 现在对应一个空数组，它是状态的初始值。 这不应该是这种情况，因为这个状态已经在初始渲染期间设置并且不会被覆盖。

作为测试，我实现了一个调用相同函数的简单按钮：

<button onClick={_onColumnHeaderContextMenu}>TEST</button>

如果函数是通过按钮执行的，状态会保持其正确的值，在我的例子中是在初始渲染期间设置的服务数组。

在我看来，问题仅与下拉菜单或上下文菜单有关。

这可能是 FluentUI 框架中的错误吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）