Question

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

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

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

无论如何，当我滚动时，更新存储，重新渲染侦听此存储值的组件，调用render方法，从render（）内部的console.logs显示＆＃34; selectedMenu＆＃34的正确值; （这是我的商店价值），**但是，从render（）的return（）生成的html不会更新＆＃34; selectedMenu＆＃34;变量值。

有关首次显示的信息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});

Answer 1

该死的！

来自IRC #reactjs的人发现了它。问题来自未更新的组件（未在此处发布）（shouldComponentUpdate始终返回false）。删除此SCU并重新开始工作。

在渲染的html中未更新道具，但在render（）

1 个答案: