json - 无法读取 React + Phoenix 框架中未定义的属性“地图”

Question

我是反应新手。我提供了Postgresql API，我想在Material UI Table中添加这些数据。我犯了一些错误，我无法弄清楚。我第一次使用Axios使用 API 调用。所以请指导我解决这个问题。

我将React.js用于前端工作，Phoenix 框架用于后端，以及PostgreSQL 数据库。

以下组件用于使用 Axios 处理 API 请求

import axios from "axios"
import MedicineCard from './MedicineCard'

class Medicines extends React.Component {
    constructor() {
        super();
        this.state = { medicines: [] };
      }
    componentWillMount() {
        axios.get('http://localhost:4000/medicines')
          .then(response => {
            this.setState({ medicines: response.data.medicines });
          })
          .catch(error => {
            console.log(error);
          });
      }
      
      render() {
        const posts = this.state.medicines.map((medicine, index) =>
          <MedicineCard
            key = { index }
            medid = {medicine.medid}
            medname = {medicine.medname}
          />
        )
        return (
          <div>
          {posts}
          </div>
        )
      }
  }

  export default Medicines 

下面的组件用于材质 UI 表

import React from 'react'
import MaterialTable from 'material-table'

class MedicineCard extends React.Component{
    render(){
    const data=[
        {medid:this.props.medid,medname:this.props.medname}
    ]
    const column=[
        {
            title:'Medicine_ID',field:'medid'
        },
        {
            title:'Medicine_Name',field:'medname'
        }
    ]
    return (
    <div>
    <MaterialTable title="Material Table" 

        data={data}
        column ={column}
    />
    </div>
  
    );
}
}

export default MedicineCard

该组件用于显示 UI

import React from 'react'
import Medicines from './Medicines'

const Test = () => (
  <div>
  <Medicines />
      
  </div>
)
export default Test

请帮助我并指导我解决这个问题

标签： jsonreactjspostgresqlaxiosmaterial-ui