[英]Why is my React state undefined even after setting the state in UseEffect hook?
[英]Why after onClick my state is undefined ? [Hook, React]
我正在尝试将钩子集成到旧的一页 React 应用程序中。 对于开始,我只是用函数组件替换父组件(类)。
问题:当我点击一个项目菜单时,我有“未捕获的类型错误:无法读取未定义的属性‘1’”
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>
)
2- <Menu>
组件代码是一个类,我还没有通过功能组件更改它。 我只是更改了父组件。
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
3 - 我的 json 数据:
{
"data" : [{
"itemsMenu" : [ {
"active" : false,
"label" : "Accueil"
}, {
"active" : true,
"label" : "Services"
}, {
"active" : false,
"label" : "Savoir-Faire"
}, {
"active" : false,
"label" : "Localisation"
}, {
"active" : false,
"label" : "contact"
} ],
"sections" : [ {
"admin" : {
"content" : "Section 0 - pette",
"title" : "Services"
},
"tech" : {
"class" : "section-0",
"parallax" : false
}
}, {
"admin" : {
"content" : "Section 1 - TEST",
"title" : "Section 1 - Titre"
},
"tech" : {
"class" : "section-1",
"parallax" : false
}
}, {
"admin" : {
"content" : "Section 2 - Content",
"title" : "Section 2 - Titre"
},
"tech" : {
"class" : "section-2",
"parallax" : false
}
}, {
"admin" : {
"content" : "Section 3 - Content",
"title" : "Section 3 - Titre"
},
"tech" : {
"class" : "section-3",
"parallax" : false
}
} ]
}]
}
错误截图:
尝试:
<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)
}
--> setDatas(datas) !!!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.