![](/img/trans.png)
[英]Cannot read property 'state' of undefined in react-native context api?
[英]React context state property is undefined
我正在嘗試使用react的新上下文API,json作為數據,Providers,Consumers等動態構建Web應用程序菜單。我不知道出現錯誤。 但是首先這是一些代碼:
上下文文件包括:
import React from 'react';
export const MenuContext = React.createContext();
class MenuProvider extends React.Component {
state = {
menu: {}
};
actions = {
fetchMenu: async() => {
const response = await fetch('/admin/json/menu.json');
const body = await response.json();
this.setState({
menu: body
});
}
}
componentDidMount() {
this.actions.fetchMenu();
}
render() {
return(
<MenuContext.Provider value={{state: this.state, actions: this.actions}}>
{this.props.children}
</MenuContext.Provider>
)
}
}
export default MenuProvider;
菜單組件按如下方式使用此上下文:
import React from 'react';
import {v1 as uuid} from 'uuid';
import MenuProvider, {MenuContext} from './contexts/menu';
import MenuDropdown from './parts/menu-dropdown';
import MenuItem from './parts/menu-item';
export default class SideMenu extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<header>
<MenuProvider>
<MenuContext.Consumer>
{({state}) => (
<React.Fragment>
<div className="cnt-menu-head">
<h6>{state.menu.heading}</h6>
</div>
<div className="cnt-menu">
<ul className="nav nav-pills flex-column">
{state.menu.sections.map((section, i) => {
if (section.type === 'link') {
return <MenuItem exact={section.exact} linkTo={section.linkTo} linkText={section.linkText}/>
} else if (section.type === 'dropdown') {
var keyedLinks = section.links.map((link) => {
link.key = uuid();
return link;
});
return <MenuDropdown key={uuid} linkText={section.linkText} links={keyedLinks}/>
}
})}
</ul>
</div>
</React.Fragment>
)}
</MenuContext.Consumer>
</MenuProvider>
</header>
);
};
};
menu.json文件包含以下數據:
{
"heading": "Menu Heading",
"sections": [
{
"type": "link",
"linkText": "A Link",
"linkTo": "/",
"exact": true
},
{
"type": "dropdown",
"linkText": "System",
"links": [
{
"linkText": "System Table",
"linkTo": "/table/system",
"exact": false
},
{
"linkText": "Add System",
"linkTo": "/form/addsystem",
"exact": false
}
]
}
]
}
我在package.json中使用的軟件包版本為:
"devDependencies": {
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-router-dom": "^4.3.1",
"uuid": "^3.3.0"
},
.babelrc
文件是:
{
"presets": [
["es2016"],
"react"
],
"plugins": [
"transform-class-properties"
]
}
此應用程序的編譯運行沒有錯誤,盡管我在運行控制台時遇到了javascript錯誤:
未捕獲的TypeError:無法讀取未定義的屬性“ map”
這里要state.menu.sections
的屬性是state.menu.sections
,我要遍歷並根據類型進行渲染。 如果我注釋掉我用地圖循環state.menu.sections
的部分,則部分<h6>{state.menu.heading}</h6>
可以正常工作,並且呈現<h6>Menu Heading</h6>
而沒有任何錯誤。 當我循環sections數組時,可能是什么問題?
試試這個代碼:
import React from 'react';
export const MenuContext = React.createContext();
class MenuProvider extends React.Component {
state = {
menu: { heading: '', sections: [] }
};
actions = {
fetchMenu: async() => {
const response = await fetch('/admin/json/menu.json');
const body = await response.json();
this.setState({
menu: body
});
}
}
componentDidMount() {
this.actions.fetchMenu();
}
render() {
return(
<MenuContext.Provider value={{state: this.state, actions: this.actions}}>
{this.props.children}
</MenuContext.Provider>
)
}
}
export default MenuProvider;
區別在於menu
處於state
,而不是空的menu
對象,您需要為其提供默認值。
注意:我不確定該錯誤,但是我認為這是因為javascript嘗試在componentDidMount
將新狀態設置為您的state
之前在state.menu.sections
上使用map
(因此state.menu.sections
默認情況下是undefined
的)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.