LoginSignup
rempei
@rempei

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

<Table />のリストが表示されない

解決したいこと

このDoctor_TableコンポーネントをレンダリングしたときTableのリストの中身が表示されないのですがどこが問題なのかが分かりません。どなたか分かる方がいらっしゃいましたら教えてほしいです。

image.png

該当するソースコード

import { Table } from "antd"
import { connect } from "react-redux"

const Doctor_Table = ({ doctor }) => {
  const columns = [
    {
      title: "医師名",
      dataIndex: "name",
      width: 125,
    },
    {
      title: "病院名",
      dataIndex: "address",
      width: 175,
    },
  ]

  const doctorData = [
    doctor.map((d)=>{
      return {
        key: d.key,
        name: d.name,
        hospital: d.hospital,
      }
    })
  ]

  console.log(doctorData) // コンソールにはちゃんと表示される

  return (
    <>
      <Table
        columns={columns}
        dataSource={doctorData}
        pagination={{
          pageSize: 50,
        }}
        scroll={{
          y: 240,
        }}
      />
    </>
  )

}

const mapStateToProps = (state) => {
  return {doctor: state.doctor}
}
//state.doctorは下記のようなコード
doctor: [
    { key:1, name: "吉田", hospital: "吉田病院" },
    { key:2, name: "William Jefferson Smith", hospital: "San Francisco National Hospital" },
    { key:3, name: "中井", hospital: "広島大学付属病院" },
    { key:4, name: "加藤", hospital: "加藤記念病院" },
    { key:5, name: "ジェームス", hospital: "赤十字病院" },
  ]

export default connect(mapStateToProps)(Doctor_Table)

0

1Answer

doctorDataの出力をよく見てみてください.おそらく二重の配列になっているはずです.

Wrong
  const doctorData = [
    doctor.map((d)=>{
      return {
        key: d.key,
        name: d.name,
        hospital: d.hospital,
      }
    })
  ]
Correct
  const doctorData = 
    doctor.map((d)=>{
      return {
        key: d.key,
        name: d.name,
        hospital: d.hospital,
      }
    })
2

Comments

  1. このような間違いはconsole.logではなくconsole.tableを確認したり,「TypeScriptを導入すると発見しやすくなります」.データを扱う量が増えた場合は積極的に導入を検討してください.
  2. @rempei

    Questioner
    直りました!ありがとうございました。
    console.table確認してみます!

Your answer might help someone💌