Javascript 为什么onClick之后我的状态未定义?[钩,反应]
我正在尝试将钩子集成到一个旧的单页React应用程序中。对于beginin,我只是将父组件(类)替换为函数组件Javascript 为什么onClick之后我的状态未定义?[钩,反应],javascript,reactjs,firebase,Javascript,Reactjs,Firebase,我正在尝试将钩子集成到一个旧的单页React应用程序中。对于beginin,我只是将父组件(类)替换为函数组件 class Menu extends Component { render() { const { itemsMenuAction, --otherProps--} = this.props return ( <div className="main-menu"> <ul cla
class Menu extends Component {
render() {
const { itemsMenuAction, --otherProps--} = this.props
return (
<div className="main-menu">
<ul className={openClassState ? 'list-item-menu open' : 'list-item-menu'}>
{
Object.keys(itemsMenuState)
.map(key =>
<li className={itemsMenuState[key].active ? 'item-menu active' : 'item-menu'}
onClick={ () => itemsMenuAction(key)}
key={key}>
{itemsMenuState[key].label+"."}
</li>
)
}
</ul>
<div className={openClassState ? "btn-menu open" : "btn-menu"} onClick={openMenuAction}>
<nav>
<a href="#" className="menu">
<div className="menu--text">
<span data-hover>Menu</span>
<span data-close>Fermer</span>
</div>
</a>
</nav>
</div>
</div>
)
}
}
}
export default Menu
- 我的一页申请表上有三个部分
- 我在页面顶部有一个包含4个部分的菜单,可以自动滚动到目标部分
1-安装应用程序时,我调用firebase并将数据设置为以下状态:
export const App = () => {
const [datas, setDatas] = useState([]);
// FIREBASE ------------------------------------ //
useEffect(() => {
const datas = base.syncState('/data', {
context: {
setState: ({ datas }) => setDatas({ ...datas }),
state: { datas },
},
state: 'datas'
})
return () => {
base.removeBinding(datas);
}
}, [])
// USED TO MANAGE THE ACTIVE SECTION ----------- //
const toggleClassActive = (key) => {
Object.keys(datas[0].itemsMenu).map(key => datas[0].itemsMenu[key].active = false)
datas[0].itemsMenu[key].active = true
setDatas(datas[0].itemsMenu)
}
return (
<div className="container">
<Menu itemsMenuAction={toggleClassActive}></Menu>
<Section id="section1" sectionObj={datas[0].sections[1] ? datas[0].sections[1] : "" } />
<Section id="section2" sectionObj={datas[0].sections[2] ? datas[0].sections[2] : "" } />
<Section id="section3" sectionObj={datas[0].sections[3] ? datas[0].sections[3] : "" } />
</div>
)
错误屏幕截图: 试试:
<div className="container">
<Menu itemsMenuAction={toggleClassActive}></Menu>
<Section id="section1" sectionObj={datas.length ? datas[0].sections[1] : "" } />
<Section id="section2" sectionObj={datas.length ? datas[0].sections[2] : "" } />
<Section id="section3" sectionObj={datas.length ? datas[0].sections[3] : "" } />
</div>
这是一个愚蠢的错误:
const toggleClassActive = (key) => {
Object.keys(datas[0].itemsMenu).map(key => datas[0].itemsMenu[key].active = false)
datas[0].itemsMenu[key].active = true
setDatas(datas[0].itemsMenu)
}
-->设置数据(数据)
const toggleClassActive = (key) => {
Object.keys(datas[0].itemsMenu).map(key => datas[0].itemsMenu[key].active = false)
datas[0].itemsMenu[key].active = true
setDatas(datas[0].itemsMenu)
}