Question

我曾经以自己的本地状态存储某些弹出窗口的打开/关闭状态。然后我将其移至redux，以便能够控制许多弹出窗口。而且有效。

但是我也需要存储弹出窗口的“ anchorEl”（currentTarget）位置。但是，当我尝试在化简器中添加currentTarget时，弹出窗口会花费一些时间，并且在redux devtools中不会出现任何动作（停止工作？）。但是弹出窗口确实出现在正确的位置，因此减速器似乎正确地存储了打开/关闭和位置，但是它花费的时间太长（第一次单击后效果会好一些，但是第一次过慢）。

所以我想知道为什么会发生延迟，为什么redux devtools会停止工作，并且代码中是否有任何错误？

我从视图组件开始操作：

handleClickItem(e, termId) { 

        e.stopPropagation();
        e.preventDefault(); 

         this.props.toggleOpenMenuItem(id, e.currentTarget);

弹出框从redux获取打开/关闭状态和位置：

<Popover 
        open={this.props.openState}
        anchorEl={this.props.anchorEl}

动作：

export const toggleOpenMenuItem = (id, currentTarget) => {
    return({
        type: TOGGLE_OPEN_MENU_ITEM,
        payload: {id, currentTarget}
    });
};

减速器

case TOGGLE_OPEN_MENU_ITEM: 

        var openState = true;
        if(action.payload.id in state.menuItems) {
            openState = !state.menuItems[action.payload.id].open;
        }

        return {
            ...state,
            menuItems: {
                ...state.menuItems,
                [action.payload.id] : {
                    open: openState
                    currentTarget: action.payload.currentTarget
                }
            },
        };

如果我控制台记录当前目标，它将给出[object HTMLLIElement]。

如果我不将currentTarget添加到化简器中的状态，则弹出窗口仍会缓慢打开，但是操作确实会在化简器中显示（尽管会再延迟一次）。如此看来，发送[object HTMLLIElement]的动作似乎有些问题？

修改：我意识到我可以将anchorEl存储在本地状态。我只需要使用redux来控制打开/关闭状态。我还是想知道问题出在哪里。

当在redux状态下存储currentTarget时发生延迟，devtools停止更新

0 个答案: