[英]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.