props 未在渲染的 html 中更新，但从 render() 在 console.log 中更新答案

【问题标题】：props not updated in html rendered, but updated in console.log from render()props 未在渲染的 html 中更新，但从 render() 在 console.log 中更新
【发布时间】：2017-03-30 09:46:21
【问题描述】：

我有一个使用 react-scroll 库监听滚动的导航菜单。

工作：我将激活的元素保存到我的商店，所以每次我滚动一个新元素时，我的商店都知道哪个元素是“活动的”。

当我显示导航菜单时，我想检查商店中哪个元素处于活动状态，并在某些导航元素上添加一个类。我不能用 react-scroll 做到这一点，因为我的元素是嵌套的（我想根据当前的 react-scroll 活动元素突出显示一些中间导航元素）。

无论如何，当我滚动时，存储被更新，监听这个存储值的组件被重新渲染，渲染方法被调用，console.logs 从 render() 内部显示“selectedMenu”的正确值（这是我的store value), ** BUT **, 从 render() 的 return() 生成的 html 不会更新 "selectedMenu" 变量值。

关于第一次显示的信息 selectedMenu 为空，因为没有点击/滚动任何内容。这个空值保留在渲染的返回中，但会在 render() 内的 console.log 中更新。

快疯了……

render(){
    const {opened, menuId, sub, selectedMenu, selectedCat, setActiveDispatch, anchorKey, titleKey, subClickedDispatch} = this.props;

    console.log('****** selectedMenu : ' + selectedMenu); // displaying the updated value
    console.log('****** selectedCat : ' + selectedCat); // displaying the updated value

    const subData = sub.map((subcat, index)=> {
        console.log("inside map & selectedMenu : " + selectedMenu); // displaying the updated value
        console.log("inside map & selectedCat : " + selectedCat); // displaying the updated value
        return (
            <div key={menuId+'_'+index}>
                <SubMenuChildren>
                    <Link isDynamic={true} offset={-80} onSetActive={(to)=>setActiveDispatch(to)} to={subcat[anchorKey]+"_top_empty"} spy={true} smooth={true} duration={500}><ListItem innerDivStyle={{padding:'0px 0 0px 0px'}} style={{height:'0px'}}></ListItem></Link>
                </SubMenuChildren>
                <SubMenuChildren>
                    {/* selectedMenu NOT UPDATED : is empty, subcat[anchorKey] is ok */}
                    <div>test : {selectedMenu} {subcat[anchorKey]}</div> 
                    {/* selectedCat NOT UPDATED : is empty, subcat[anchorKey] is ok */}
                    <div>test : {selectedCat} {subcat[anchorKey]}</div> 

                    {/* test is always false as selectedMenu is always empty */}
                    <Link isDynamic={true} className={selectedMenu==subcat[anchorKey]?'active':''} offset={-80} onSetActive={(to)=>setActiveDispatch(to)} to={subcat[anchorKey]} spy={true} smooth={true} duration={500} onClick={()=>subClickedDispatch(subcat)}><ListItem innerDivStyle={{padding:'5px 0 5px 5px'}} style={this.style.navSubElements} hoverColor='transparent' primaryText={ subcat[titleKey] }></ListItem></Link>
                </SubMenuChildren>
            </div>
        );
    });

    return (
        <div className={opened?'subMenu open':'subMenu close'}>
            <div>retest : {selectedMenu}</div> {/* value is updated  !*/}
            {subData}           
        </div>
    );
}

这是我的 mapStateToProps ：

const mapStateToProps=(state)=>({
clickedMain: state.appReducer.clickedMain,
selectedMenu: state.appReducer.selectedMenu,
selectedCat: state.appReducer.selectedCat});

【问题讨论】：

标签： reactjs redux react-redux

【解决方案1】：

该死的！

来自 IRC #reactjs 的某人刚刚发现了它。问题来自未更新的组件（未在此处发布）（应该ComponentUpdate 始终返回false）。删除此 SCU 后一切正常。

【讨论】：