Javascript 反应上下文状态属性未定义

我正在尝试使用react的新上下文API、json作为数据、提供者、消费者等动态构建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;

我在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

，我想循环遍历它并根据类型进行渲染。 如果我用map注释掉part I循环

state.menu.sections

，则part

{state.menu.heading}

工作正常，呈现

菜单标题

，没有任何错误。循环节数组时可能出现什么问题？

请尝试以下代码：

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;

从“React”导入React；
export const MenuContext=React.createContext（）；
类MenuProvider扩展了React.Component{
状态={
菜单：{标题：“”，节：[]}
};
行动={
fetchMenu:async（）=>{
const response=wait fetch（'/admin/json/menu.json'）；
const body=wait response.json（）；
这是我的国家({
菜单：正文
});
}
}
componentDidMount（）{
this.actions.fetchMenu（）；
}
render（）{
返回(
{this.props.children}
)
}
}
导出默认菜单编辑器；

区别在于

菜单

在

状态

中，您需要为其提供默认值，而不是空的

菜单

对象

注意：我不确定这个错误，但我认为这是因为javascript试图在

state.menu上使用
map
。在
componentDidMount
之前使用
sections
，将新状态设置为
状态
（因此
state.menu。默认情况下，
节将
未定义）
尝试以下代码：

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;

从“React”导入React；
export const MenuContext=React.createContext（）；
类MenuProvider扩展了React.Component{
状态={
菜单：{标题：“”，节：[]}
};
行动={
fetchMenu:async（）=>{
const response=wait fetch（'/admin/json/menu.json'）；
const body=wait response.json（）；
这是我的国家({
菜单：正文
});
}
}
componentDidMount（）{
this.actions.fetchMenu（）；
}
render（）{
返回(
{this.props.children}
)
}
}
导出默认菜单编辑器；

区别在于
菜单
在
状态
中，您需要为其提供默认值，而不是空的
菜单
对象

注意：我不确定这个错误，但我认为这是因为javascript试图在
state.menu.sections
组件挂载之前使用
map
（默认情况下，
state.menu.sections
将新状态设置为
state
）
这是有效的。但是，在不硬编码对象中的每个属性的情况下，难道没有任何方法可以获取菜单数据吗？我真的希望提供程序独立于实际的数据结构，这样我就可以将其转换为通用的提供程序？嗯。。。不确定这对你是否有用。我使用了Redux，初始存储状态为默认值
props
value。当我需要改变商店结构时，我会去Redux。（几乎我所有的React组件都是无状态组件）是的，这是可行的。但是，在不硬编码对象中的每个属性的情况下，难道没有任何方法可以获取菜单数据吗？我真的希望提供程序独立于实际的数据结构，这样我就可以将其转换为通用的提供程序？嗯。。。不确定这对你是否有用。我使用了Redux，初始存储状态为默认值
props
value。当我需要改变商店结构时，我会去Redux。（几乎我所有的React组件都是无状态组件）
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;