我尝试使用react和redux创建选项卡.这一切都很好，但我希望在关闭上一个元素时高亮显示下一个元素

Question

但是，在删除元素后，我无法更新列表。无论我在reducer中更改了什么，我都无法更新将在渲染方法中反映的列表。

我的渲染方法：

public render() {
let tablist: any;
let updatedList = this.props.OpenTabs.slice();
divStyle = {
borderBottom: '5px solid white'
};
if (updatedList) {
tablist = updatedList.map((menuitem, index, array) => {
this.handleColors(menuitem)
return (
<div
key={Math.random()}
className='tab-elements'
style={divStyle}
id={menuitem.RoutePath} 
onClick={() => this.makeActive(menuitem)}>
<Tab
MenuText={menuitem.MenuText}
IconPath={menuitem.IconPath}
RoutePath={menuitem.RoutePath}
id={menuitem.id}
isActive={menuitem.isActive} />                           
<span><label onClick={() => this.crossHandler(menuitem, array[index + 1], array[index - 1])} >X</label></span>                                                 
</div>
);
});
}
return <div className='top-nav'>
<div className='navbar navbar'>
{/*  <button className= 'testButton' onClick={() => this.handleClose("Documents4Action")}>close frame</button>*/}
<div className='navbar-header'>
<Link to="/" onClick={() => { this.handleStateChange(this.props.MainMenuOpen) }}>
<button className='HomeButton'>
<img className='HomeButtonImage' alt='D4ALogo_White' src={String(D4ALogo_White)}></img>
</button>
</Link>  
<button className='MenuButton' onClick={() => { this.props.togglemenu() }}>
<img className='MenuButtonImage' alt='HamburgerIcon_White' src={String(HamburgerIcon_White)}></img>
</button>
<div className='tab-position'>
<div className='row'>
{tablist}
</div>
</div>
</div>
</div>
</div>;
}

处理点击关闭按钮操作的方法：

crossHandler(menuitem: any, nextElem: any, prevElem: any) {
if (menuitem !== undefined && nextElem !== undefined) {
this.props.history.push(nextElem.RoutePath);
this.props.removetab(menuitem, nextElem)
}
else {
if (prevElem !== undefined) {
this.props.history.push(prevElem.RoutePath);
this.props.removetab(menuitem, prevElem)
}
else {
this.props.history.push('/');
}
}

}

我的redux:减速器

case 'REMOVE_TAB_ACTION':
const index = state.OpenTabs.map(item => 
item.MenuText).indexOf(action.MenuItemDetails.MenuText);
let updatedList = [
...state.OpenTabs.slice(0, index),
...state.OpenTabs.slice(index + 1),
]
updatedList.map(menu => {
console.log("checking inside the list")
if (menu.MenuText === action.MenuItemNextOrPrevDetails.MenuText) {
menu.isActive = true
}
else {
menu.isActive = false
}
console.log(menu)
});
return {
MainMenuOpen: state.MainMenuOpen,
shoulOverlay: state.shoulOverlay,
MenuItems: state.MenuItems,
SelectedMenuItems: state.SelectedMenuItems,
OpenTabs: updatedList
}

我尝试使用Object.assign，但也不起作用。当我使用这个方法时，我所有其他的更新方法都很好，但删除后的更新会给我一个错误。有人能指出问题出在哪里吗。任何建议都会有帮助。我不能使用第三方库，如果有人知道这个错误，请告诉我。

Answer 1

。。。我们有了答案：array.map用修改过的元素创建新的数组——在循环中检查值——我们只有证据证明更改/条件是正确的——而不是返回的数组。

updatedList = updatedList.map(menu => {
console.log("checking inside the list")
if (menu.MenuText === action.MenuItemNextOrPrevDetails.MenuText) {
menu.isActive = true
} else {
menu.isActive = false
}
console.log(menu)
});

或更简单的

updatedList = updatedList.map((menu) => {
menu.isActive = (menu.MenuText === action.MenuItemNextOrPrevDetails.MenuText)
});