TypeScript + Reactでの配列操作について

Question

#現象
re-ducks-study

上記参考ソースと同じコーティング方法で実装を行っているのですが
エラーが出力され、処理が実行できません。。

#やったこと
・map,filter,foreachで確認
・データ型をFoldではなく、id name ...などに変更して処理
・直書きで動作できるのは確認OK

#エラー内容

TypeError: folders.map is not a function

SideBar
C:/work/10_dev/react/learn-speak/src/views/components/SideBar.tsx:73
70 | {/* {open ? <ExpandLess /> : <ExpandMore />} */}
71 | </ListItem>
72 | <Collapse in={true} timeout="auto" unmountOnExit>
73 | <List component="div" disablePadding>
74 |^ {folders.map((folder) => (
75 | <FolderItem key={folder.id} folder={folder} />
76 | ))}

###sidebar.tsx(エラーとなっているファイル)

import React, { FC } from "react";
import { Fold } from "speak";
// import { makeStyles, Theme, createStyles } from "@material-ui/core/styles";
import { withStyles, WithStyles, StyleRules } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import Collapse from "@material-ui/core/Collapse";
import InboxIcon from "@material-ui/icons/MoveToInbox";
import DraftsIcon from "@material-ui/icons/Drafts";
import SendIcon from "@material-ui/icons/Send";
// import ExpandLess from "@material-ui/icons/ExpandLess";
// import ExpandMore from "@material-ui/icons/ExpandMore";
import Folder from "@material-ui/icons/Folder";

const styles = (): StyleRules => ({
  root: {
    maxWidth: 360,
    // backgroundColor: theme.palette.background.paper,
    display: "block",
  },
});

type FolderProps = {
  folder: Fold;
};

const FolderItem: FC<FolderProps> = ({
  folder: { id, name, text, opened, file },
}) => (
  <ListItem button key={id}>
    <ListItemIcon>
      <Folder />
      {id}
    </ListItemIcon>
    <ListItemText primary={name} />
  </ListItem>
);

type Props = WithStyles<typeof styles> & {
  folders: Fold[];
};

const SideBar: FC<Props> = ({ classes, folders }) => (
  <div>
    <List
      component="nav"
      aria-labelledby="nested-list-subheader"
      className={classes.root}
    >
      <ListItem button>
        <ListItemIcon>
          <SendIcon />
        </ListItemIcon>
        <ListItemText primary="Sent mail" />
      </ListItem>
      <ListItem button>
        <ListItemIcon>
          <DraftsIcon />
        </ListItemIcon>
        <ListItemText primary="Drafts" />
      </ListItem>
      <ListItem button>
        {/* <ListItem button onClick={handleClick}> */}
        <ListItemIcon>
          <InboxIcon />
        </ListItemIcon>
        <ListItemText primary="Inbox" />
        {/* {open ? <ExpandLess /> : <ExpandMore />} */}
      </ListItem>
      <Collapse in={true} timeout="auto" unmountOnExit>
        <List component="div" disablePadding>
           {folders.map((folder) => (　　　　　　　　　　　　　←ここでエラー
            <FolderItem key={folder.id} folder={folder} />
          ))}
        </List>
      </Collapse>
    </List>
  </div>
);

// export default SideBar;

export default withStyles(styles)(SideBar);

###speak.d.ts(データ型)

declare module "speak" {
  export interface Fold {
    id: string;
    name: string;
    text: string;
    opened: boolean;
    file: File;
  }
  export interface File {
    id: string;
    name: string;
    text: string;
    listening: boolean;
  }
}

###package.json

{
  "name": "learn-speak",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.9.14",
    "@material-ui/icons": "^4.9.1",
    "@reduxjs/toolkit": "^1.3.6",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "@types/jest": "^24.9.1",
    "@types/node": "^12.12.41",
    "@types/react": "^16.9.35",
    "@types/react-dom": "^16.9.8",
    "@types/react-redux": "^7.1.9",
    "@types/react-scroll": "^1.5.5",
    "@types/redux-actions": "^2.6.1",
    "cuid": "^2.1.8",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.0",
    "react-scripts": "3.4.1",
    "react-scroll": "^1.7.16",
    "redux-actions-type": "^1.0.0",
    "typescript": "^3.7.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

##以下追記
###App.tsx

import React from "react";
import "./App.css";
import Speak from "./containers/Speak";

const App: React.FC = () => {
  return (
    <React.Fragment>
      <Speak />
    </React.Fragment>
  );
};

export default App;

###Speak.tsx

import React, { FC } from "react";
import { Fold } from "speak";
// import { makeStyles, Theme, createStyles } from "@material-ui/core/styles";
import { withStyles, WithStyles, StyleRules } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Header from "../components/Header";
import SideBar from "../components/SideBar";
import Body from "../components/Body";
import Footer from "../components/Footer";

const styles = (): StyleRules => ({
  flex: {
    // backgroundColor: theme.palette.background.paper,
    display: "flex",
  },
  sidebar: {
    width: "30%",
    border: "0.8px solid gray",
    margin: "5px",
  },
  body: {
    width: "100%",
    margin: "5px 5px 5px 0px",
    border: "0.8px solid gray",
  },
  foot: {
    height: "10px",
    textAlign: "right",
    margin: "10px",
  },
});

type Props = WithStyles<typeof styles> & {
  folders: Fold[];
  folderAdd: () => void;
  folderDel: () => void;
  fileAdd: () => void;
  fileDel: () => void;
  musicStart: () => void;
  musicStop: () => void;
  musicEnd: () => void;
};

const Speak: FC<Props> = ({
  classes,
  folderAdd,
  folderDel,
  fileAdd,
  fileDel,
  musicStart,
  musicStop,
  musicEnd,
  folders,
}) => {
  return (
    <div>
      <Header />
      <div className={classes.flex}>
        <Paper className={classes.sidebar}>
          <SideBar folders={folders} />
        </Paper>
        <Paper className={classes.body}>
          <Body />
        </Paper>
      </div>
      <div className={classes.foot}>
        <Footer />
      </div>
    </div>
  );
};

export default withStyles(styles)(Speak);

Comments

[maisumakun]

Sidebarはどのようにマウントしていますか？

[nakapon9517]

ご質問ありがとうございます。追記いたしました。
質問への回答になっているか不安ですが、、、
ComponentDidMountなどは理解できていないので未記載です。

Answer 1

正しい値を渡していないだけと思われます。

<App>内で<Speak />としているので、この<Speak>に渡されるpropはありません。結果、foldersもundefinedとなって、それが<SideBar folders={folders} />として渡されるので、そのままundefinedが来ます。もちろんmapはできません。