TypeScript React Redux データがあるのに表示できない

TypeScript React Reduxでtodoアプリを作っているのですが、mapStateToPropsで受け取った値を上手く表示できませんでした。
値はちゃんと受け取れていると思うのですが、、どこかがずれてしまっているのでしょうか？

エラーメッセージ

Property 'taskId' does not exist on type '{ taskId: number; title: string; description: string; status: string; createTime: string; updateTime: string; tag?: string[] | undefined; }[]'.

component

typescript
1import React, { Component, Dispatch } from "react";
2import { Button, ButtonGroup, Breadcrumb, Row, Col } from "react-bootstrap";
3import { Link } from "react-router-dom";
4import { readEvents } from "../actions/index";
5import { connect } from "react-redux";
6import _ from "lodash";
7import events, { listData } from "../reducer/events";
8
9interface getProps {
10  events: {
11    // type?: string;
12    data: {
13      taskId: number;
14      title: string;
15      description: string;
16      status: string;
17      createTime: string;
18      updateTime: string;
19      tag?: string[];
20    }[];
21  };
22}
23
24class Task extends Component<getProps> {
25  constructor(props: getProps) {
26    super(props);
27  }
28  componentDidMount() {
29    readEvents({ limit: 0 });
30  }
31  renderList() {
32    console.log(this.props);
33     return _.map(this.props.events.data, (events: listData) => (
34      <Breadcrumb>
35        <p>{events.data.taskId}</p>
36      </Breadcrumb>
37    ));
38  }
39  render() {
40    this.renderList();
41    return (
42      <div>
43        <Row className="justify-content-md-center">
44          <Col xs lg="2">
45            <Breadcrumb>
46              <ButtonGroup vertical>
47                <Button variant="outline-warning">
48                  <Link to="/task/:id">編集</Link>
49                </Button>{" "}
50                <Button variant="outline-warning">
51                  <Link to="/task/:id">削除</Link>
52                </Button>{" "}
53              </ButtonGroup>
54            </Breadcrumb>
55          </Col>
56          {/* <Col>{this.renderList()}</Col> */}
57        </Row>
58      </div>
59    );
60  }
61}
62
63const mapStateToProps = (state: listData) => state;
64const mapDispatchToProps = (dispatch: any) => {
65  readEvents(dispatch);
66};
67
68export default connect(mapStateToProps, mapDispatchToProps)(Task);

reducer

typescript
1import { READ_EVENTS } from "../actions/index";
2import _ from "lodash";
3
4
5export interface listData {
6  type?: string;
7  data: {
8    taskId: number;
9    title: string;
10    description: string;
11    status: string;
12    createTime: string;
13    updateTime: string;
14    tag?: string[];
15  }[];
16}
17
18const initialState: listData = {
19  data: [
20    {
21      taskId: 0,
22      title: "",
23      description: "",
24      status: "",
25      createTime: "",
26      updateTime: "",
27      tag: [],
28    },
29  ],
30};
31
32export default (events = initialState, action: listData) => {
33  switch (action.type) {
34    case READ_EVENTS:
35      return { ...events, data: action.data };
36    default:
37      return events;
38  }
39};

stub

typescript
1export const data = [
2  {
3    taskId: 1,
4    title: "title",
5    description: "description",
6    status: "ok",
7    createTime: "2020-12-16",
8    updateTime: "2020-12-16",
9    tag: ["#react", "#redux"],
10  },
11  {
12    taskId: 2,
13    title: "title",
14    description: "description",
15    status: "ok",
16    createTime: "2020-12-16",
17    updateTime: "2020-12-16",
18    tag: ["#react", "typescript"],
19  },
20];
21

action

typescript
1import axios from "axios";
2import { data } from "./test-stub";
3import { listData } from "../reducer/events";
4
5export const READ_EVENTS = "READ_EVENTS";
6
7// const ROOT_URL = "http://localhost:3000"
8const ROOT_URL = "https://udemy-utils.herokuapp.com/api/v1";
9const QUERYSTRING = "?token=token123";
10
11export async function readEvents(dispatch: any) {
12  dispatch({ type: "READ_EVENTS", data });
13}

GitHub
Github

mapStateToPropsで受け取った値(componentのrenderList関数)
![]

行動規範の内容に同意します

回答1件

ベストアンサー

JavaScript
1const mapDispatchToProps = (dispatch: any) => {
2  readEvents(dispatch);
3};

ここが違いますね。ここで返すべきは関数の集まりなので

JavaScript
1const mapDispatchToProps = (dispatch: any) => {{
2  readEvents: readEvents(dispatch);
3}};

が正しいです。また readEvents の使い方も this.props.readEvents になるのでご注意を。

追記

型定義は

TypeScript
1// import { Dispatch } from 'redux'
2export type Entity = {
3  taskId: number,
4  title: string,
5  description: string,
6  status: string,
7  createTime: string,
8  updateTime: string,
9  tag?: string[],
10}
11
12export type Entities = Entity[]
13
14export type Action = {
15  type: string,
16  data: Entity,
17}
18
19export type Props = {
20  state: Entity,
21  dispatch: Dispatch, 
22}

とすると丸く収まるでしょう。interface の使いどころがいまいちなので type にしてますが interface でも動くと思います。多分。すると reducer は

TypeScript
1export default (events = initialState, action: Entities) => {
2  ...

と書けるので dispatch は

TypeScript
1// import { Dispatch } from 'redux'
2export function readEvents(dispatch: Dispatch) {
3  dispatch({ type: "READ_EVENTS", entities });
4}

型を付けて entities に変えときました。あと async 原因ちゃうん？ということで取っ払い。本格的に dispatch を書くなら

TypeScript
1export functionAddEntity(dispatch: Dispatch){
2  return (entity: Entity) => {{ type: "ADD_ENTITY", entity }}
3}

みたいに関数を返すことになるでしょう。その時の Action 型定義は頑張ってください！

投稿2020/12/22 05:36

編集2020/12/22 07:19

A_kirisaki

総合スコア2853

like-here

2020/12/22 06:11

回答ありがとうございます！今試してみたのですが、mapDispatchToPropsの記述ではkeyのreadEventsは未使用のラベルとなってしまい、this.props.readEventsは以下のerrorが出てしまいました。。型などで他の修正が必要なのでしょうか？プロパティ 'readEvents' は型 'Readonly<{}> & Readonly<{ children?: ReactNode; }>' に存在しません。