BrowserRouter的问题，使用map不正确地迭代数组

Question

这是我的第一个React应用程序项目，我在使用<BrowserRouter>导入页面内容时遇到问题。

我有3个材料-UI选项卡/lights，/animations，/settings。

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

选项卡nr.1与其他选项卡不同，因为我使用的是名为store.js的文件，其中

export const devices = [
{
    id: "philips-hue",
    name: "Philips",
    description: "Magic RGB",
    voltage: "210",
    lights: "Philips HUE"
  }, (...)

这是不起作用的LightsMenu (来自store.js的{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 }) => (

这是SettingsMenu的外观：

export default function SettingsMenu() {
  const classes = useStyles();

  return (
    <Grid>
      <Grid item xs={12}>
        <Paper style={styles.Paper}>
          <Typography variant="h6" color="primary">

我尝试过：

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">

我如何解决这个问题？CODESANDBOX

Answer 1

你可以使用

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

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

而且，您没有使用map正确地迭代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>

希望这能有所帮助！

Answer 2

您没有从store.js导入设备

在lightsMenu组件中添加import {devices} from "./store";。