开发者问题收集

无法读取 React 应用程序中未定义的属性“map”

2019-12-27
181
javascript reactjs

我正在尝试开发一个简单的 React 应用程序，其中包含 crud 操作，但我甚至无法列出存储在 sql 数据库中的对象。我按照此示例为前端： https://github.com/only2dhir/react-js-example 我继续，为我的对象添加组件。

在我的应用程序中，我有医生和患者。一名患者被分配给一名医生，因此一名医生可以有一名或多名患者。为了做到这一点，我创建了我的 jsx 文件 ListCaregiverComponent.jsx，在其中我这样做了： 

import React, { Component } from 'react'
import ApiServiceCaregiver from "../../service/ApiServiceCaregiver";
import ApiServicePatient from "../../service/ApiServicePatient";

import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Typography from '@material-ui/core/Typography';

class ListCaregiverComponent extends Component {

    constructor(props) {
        super(props)
        this.state = {
            caregivers: [],
            patients: [],
            message: null
        }
        this.deleteCaregiver = this.deleteCaregiver.bind(this);
        this.editCaregiver = this.editCaregiver.bind(this);
        this.addCaregiver = this.addCaregiver.bind(this);
        this.reloadCaregiverList = this.reloadCaregiverList.bind(this);
        this.reloadPatientList = this.reloadPatientList.bind(this);
    }

    componentDidMount() {
        this.reloadCaregiverList();
        this.reloadPatientList();
    }

    reloadCaregiverList() {
        ApiServiceCaregiver.fetchCaregivers()
            .then((res) => {
                this.setState({caregivers: res.data.result})
            });
    }

    reloadPatientList() {
        ApiServicePatient.fetchPatients()
            .then((res) => {
                this.setState({patients: res.data.result})
            });
    }

    deleteCaregiver(userId) {
        ApiServiceCaregiver.deleteCaregiver(userId)
            .then(res => {
                this.setState({message : 'User deleted successfully.'});
                this.setState({caregivers: this.state.caregivers.filter(user => user.id !== userId)});
            })

    }

    editCaregiver(id) {
        window.localStorage.setItem("userId", id);
        this.props.history.push('/edit-caregiver');
    }

    addCaregiver() {
        window.localStorage.removeItem("userId");
        this.props.history.push('/add-caregiver');
    }

    render() {
        return (
            <div>
                <br></br>
                <br></br>
                <Typography variant="h4" style={style}>Caregiver Details</Typography>


                <br></br>
                <br></br>
                <Table>
                    <TableHead>
                        <TableRow>
                            <TableCell>Id</TableCell>
                            <TableCell align="right">Name</TableCell>
                            <TableCell align="right">Birth Date</TableCell>
                            <TableCell align="right">Gender</TableCell>
                            <TableCell align="right">Address</TableCell>
                            <TableCell align="center">Patients</TableCell>
                        </TableRow>
                    </TableHead>

                    <TableBody>
                        {this.state.caregivers.map(({ id, name, birthDate, gender, address, patients = [] }) =>(
                            <TableRow key={id}>
                                <TableCell component="th" scope="row">
                                    {id}
                                </TableCell>
                                <TableCell align="right">{name}</TableCell>
                                <TableCell align="right">{birthDate}</TableCell>
                                <TableCell align="right">{gender}</TableCell>
                                <TableCell align="right">{address}</TableCell>
                                <TableCell align="right">
                                    <TableRow>
                                        <TableCell align = "right" >Id</TableCell>
                                        <TableCell align = "right" >Name</TableCell>
                                        <TableCell align="right">Birth Date</TableCell>
                                        <TableCell align="right">Gender</TableCell>
                                        <TableCell align="right">Address</TableCell>
                                        <TableCell align="right">Medical Record</TableCell>
                                    </TableRow>
                                {patients.map(({ id, name, birthDate, gender, address, medicalRecord })=> {
                                    return (
                                        <TableRow key={id}>
                                            <TableCell component="th" scope="row">
                                                {id}
                                            </TableCell>
                                            <TableCell align="right">{name}</TableCell>
                                            <TableCell align="right">{birthDate}</TableCell>
                                            <TableCell align="right">{gender}</TableCell>
                                            <TableCell align="right">{address}</TableCell>
                                            <TableCell align="right">{medicalRecord}</TableCell>
                                        </TableRow>
                                    )
                                })}
                                </TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </div>
        );
    }

}

const style ={
    display: 'flex',
    justifyContent: 'center'
}

export default ListCaregiverComponent;

ListPatientComponent.jsx 如下所示： 

import React, { Component } from 'react'
import ApiServicePatient from "../../service/ApiServicePatient";

import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Typography from '@material-ui/core/Typography';

class ListPatientComponent extends Component {

    constructor(props) {
        super(props)
        this.state = {
            patients: [],
            message: null
        }
        this.deletePatient = this.deletePatient.bind(this);
        this.editPatient = this.editPatient.bind(this);
        this.addPatient = this.addPatient.bind(this);
        this.reloadPatientList = this.reloadPatientList.bind(this);
    }

    componentDidMount() {
        this.reloadPatientList();
    }

    reloadPatientList() {
        ApiServicePatient.fetchPatients()
            .then((res) => {
                this.setState({patients: res.data.result})
            });
    }

    deletePatient(userId) {
        ApiServicePatient.deletePatient(userId)
            .then(res => {
                this.setState({message : 'User deleted successfully.'});
                this.setState({patients: this.state.patients.filter(user => user.id !== userId)});
            })

    }

    editPatient(id) {
        window.localStorage.setItem("userId", id);
        this.props.history.push('/edit-patient');
    }

    addPatient() {
        window.localStorage.removeItem("userId");
        this.props.history.push('/add-patient');
    }

    render() {
        return (
            <div>
                <br></br>
                <br></br>
                <Typography variant="h4" style={style}>Patient Details</Typography>


                <br></br>
                <br></br>
                <Table>
                    <TableHead>
                        <TableRow>
                            <TableCell>Id</TableCell>
                            <TableCell align="right">Name</TableCell>
                            <TableCell align="right">Birth Date</TableCell>
                            <TableCell align="right">Gender</TableCell>
                            <TableCell align="right">Address</TableCell>
                            <TableCell align="right">Medical Record</TableCell>
                            <TableCell align="center">Medication Plans</TableCell>
                        </TableRow>
                    </TableHead>

                    <TableBody>
                        {this.state.patients.map(row => (
                            <TableRow key={row.id}>
                                <TableCell component="th" scope="row">
                                    {row.id}
                                </TableCell>
                                <TableCell align="right">{row.name}</TableCell>
                                <TableCell align="right">{row.birthDate}</TableCell>
                                <TableCell align="right">{row.gender}</TableCell>
                                <TableCell align="right">{row.address}</TableCell>
                                <TableCell align="right">{row.medicalRecord}</TableCell>

                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </div>
        );
    }

}

const style ={
    display: 'flex',
    justifyContent: 'center'
}

export default ListPatientComponent;

并且它有效。

我还添加了两个新的 js 文件，ApiServicePatient.js 和 ApiServiceCaregiver.js： 

import axios from 'axios';

const CAREGIVER_API_BASE_URL = 'http://localhost:8080/caregivers';

class ApiServiceCaregiver {

    fetchCaregivers() {
        return axios.get(CAREGIVER_API_BASE_URL);
    }

    fetchCaregiverById(caregiverId) {
        return axios.get(CAREGIVER_API_BASE_URL + '/' + caregiverId);
    }

    deleteCaregiver(caregiverId) {
        return axios.delete(CAREGIVER_API_BASE_URL + '/' + caregiverId);
    }

    addCaregiver(caregiver) {
        return axios.post(""+CAREGIVER_API_BASE_URL, caregiver);
    }

    editCaregiver(caregiver) {
        return axios.put(CAREGIVER_API_BASE_URL + '/' + caregiver.id, caregiver);
    }

}

export default new ApiServiceCaregiver();

import axios from 'axios';

const PATIENT_API_BASE_URL = 'http://localhost:8080/patients';

class ApiServicePatient {

    fetchPatients() {
        return axios.get(PATIENT_API_BASE_URL);
    }

    fetchPatientById(userId) {
        return axios.get(PATIENT_API_BASE_URL + '/' + userId);
    }

    deletePatient(userId) {
        return axios.delete(PATIENT_API_BASE_URL + '/' + userId);
    }

    addPatient(user) {
        return axios.post(""+PATIENT_API_BASE_URL, user);
    }

    editPatient(user) {
        return axios.put(PATIENT_API_BASE_URL + '/' + user.id, user);
    }

}

export default new ApiServicePatient();

此外，在 App.js 中，我添加了： 

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import ListUserComponent from "./component/user/ListUserComponent";
import AddUserComponent from "./component/user/AddUserComponent";
import EditUserComponent from "./component/user/EditUserComponent";

import ListPatientComponent from "./component/patient/ListPatientComponent";
import ListCaregiverComponent from "./component/caregiver/ListCaregiverComponent";

function App() {
  return (
      <div className="container">
          <Router>
              <div className="col-md-6">
                  <h1 className="text-center" style={style}>React User Application</h1>
                  <Switch>
                      <Route path="/" exact component={ListUserComponent} />
                      <Route path="/users" component={ListUserComponent} />
                      <Route path="/add-user" component={AddUserComponent} />
                      <Route path="/edit-user" component={EditUserComponent} />

                      <Route path="/patients" component={ListPatientComponent} />

                      <Route path="/caregivers" component={ListCaregiverComponent} />
                  </Switch>
              </div>
          </Router>
      </div>
  );
}

const style = {
    color: 'red',
    margin: '10px'
}

export default App;

它不起作用，它只显示： 

Unhandled Rejection (TypeError): Cannot read property 'map' of undefined

并且它用以下内容指示行： 

<TableCell align="right">{row.address}</TableCell>
 {row.patients.map(row => (

在后端应用程序中，类 Caregiver 有一个患者对象列表，映射为一对多： 

    @OneToMany(mappedBy = "caregiver", fetch = FetchType.EAGER)
    private List<Patient> patients;

有人有什么建议吗？

--------首次更新后答案---------

我不再收到该错误，但我无法在护理人员表中显示分配的患者。每个护理人员的患者对应的 TableCell 都是空的。为什么会发生这种情况？

3个回答

您执行 this.state.caregivers.map(row => 然后执行 {row.patients.map(row => ，但我没有看到任何迹象表明每个 caregivers 元素都有一个 patients 数组属性

TKoL
2019-12-27

由于您使用异步调用，javascript 开始渲染，并且在几毫秒内“this.state.caregivers”没有值，所以您无法映射空值，它需要为数组空。

请确保首先添加要检查的条件或在构造函数中将“this.state.caregivers”声明为空数组。

agroni Nomi
2019-12-27

正如其他答案中提到的， patients 对于某些行可能未定义，因此您可以使用 Destructuring 为其分配 默认值 ： 

{this.state.caregivers.map(({ id, name, birthDate, gender, address, patients = [] }) => (
  <TableCell component="th" scope="row">
     {id}
  </TableCell>
  <TableCell align="right">{name}</TableCell>
  <TableCell align="right">{birthDate}</TableCell>
  <TableCell align="right">{gender}</TableCell>
  <TableCell align="right">{address}</TableCell>

  {patients.map(row => (
   ...
Fraction
2019-12-27