Javascript BrowserRouter出现问题，使用map错误地迭代数组

这是我的第一个React应用程序项目，我在使用

导入页面内容时遇到问题

我有3个材质UI选项卡

/灯光
，
/动画
，
/设置

<Switch>
        <Route path="/lights" component={LightsMenu} />
        <Route path="/animations" component={AnimationsMenu} /> 
        <Route path="/settings" component={SettingsMenu} />
</Switch>

这就是store.js中不工作的LightsMenu（
{devices}
）的外观：

export default function LightsMenu ({ devices }){
  return (
  <Grid container spacing={1}>
    <Grid item xs>
      <Paper style={styles.Paper} >
       {devices.map(([group, devices]) => (
          <Fragment>
            <List component="ul">
              {devices.map(({ lights }) => (

及



但我有一个错误：

TypeError
devices is undefined
LightsMenu
/src/Components/Layouts/LightsMenu.js:32:6

  29 | return (
  30 | <Grid container spacing={1}>
  31 |   <Grid item xs>
> 32 |     <Paper style={styles.Paper} >
     |    ^
  33 |      {devices.map(([group, devices]) => (
  34 |         <Fragment>
  35 |           <List component="ul">

TypeError
设备未定义
LightsMenu
/src/Components/Layouts/LightsMenu.js:32:6
29 |返回(
30 | 
31 |   
> 32 |     
|    ^
33 |{devices.map（[group，devices]）=>(
34 |         
35 |           

我怎样才能解决这个问题？
您没有从store.js导入设备

加
从lightsMenu组件中的“/store”
导入{devices}。
您可以使用

import { devices } from './store.js'

<Route
  path='/lights'
  component={() => <LightsMenu devices={devices} />}
/>

希望对您有所帮助！！！
您如何将
storejs
-->
设备
数组传递到
LightsMenu
组件？我现在收到此错误：
TypeError arr[Symbol.iterator]不是一个函数_iterableToArrayLimithttps://codesandbox.io/static/js/sandbox.3300dc61.js:1 _切片射线https://codesandbox.io/static/js/sandbox.3300dc61.js:1 LightsMenu/34 |{devices.map（[组，设备]）=>（^35 | 36 | 37 |{devices.map（{lights}）=>（
你能分享你所指的代码沙盒链接吗？我会把它放在问题编辑器中。我已经更新了我的答案。请查看@b0bgetout。你没有正确地迭代数组。我认为这还不够
import LightsMenu from "./LightsMenu.js";

<Route path="/lights" component={LightsMenu} />

TypeError
devices is undefined
LightsMenu
/src/Components/Layouts/LightsMenu.js:32:6

  29 | return (
  30 | <Grid container spacing={1}>
  31 |   <Grid item xs>
> 32 |     <Paper style={styles.Paper} >
     |    ^
  33 |      {devices.map(([group, devices]) => (
  34 |         <Fragment>
  35 |           <List component="ul">

import { devices } from './store.js'

<Route
  path='/lights'
  component={() => <LightsMenu devices={devices} />}
/>

  <Paper style={styles.Paper} >
   {devices.map(({lights}) => (
      <Fragment>
        <List component="ul">
            <ListItem>
              <ListItemText id="switch" primary={lights} />
              <ListItemSecondaryAction>
                <Switch
                  edge="end"
                  inputProps={{ "aria-labelledby": "switch" }}
                />
              </ListItemSecondaryAction>
            </ListItem>
        </List>
      </Fragment>
    ))}
  </Paper>