Javascript React/React路由器-TypeError:无法读取未定义的属性

我是一个新手，正在尝试创建我的第一个应用程序。到目前为止，我一直在努力保持它的超级简单，同时遵循一些教程和文档

下面的代码导致了一个类型错误，如图所示

这是我的密码：

import React from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'


const App = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/hospitals">Find a Patient</Link></li>
      </ul>

      <hr/>

      <Route exact path="/" component={Home}/>
      <Route path="/hospitals" component={Hospitals}/>
    </div>
  </Router>
)

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const HOSPITALS = [
  { id: 0, name: 'St James', patients: [
     { id: 1, location: 'Maple ward' },
     { id: 2, location: 'Birch ward' },
     { id: 3, location: 'Pine ward' }
  ]},
  { id: 1, name: 'Harrogate Hospital', patients: [
    { id: 4, location: 'Sycamore ward' },
    { id: 5, location: 'Fern ward' },
    { id: 6, location: 'Oak ward' }
  ]},
  { id: 2, name: 'Leeds General Infirmary', patients: [
    { id: 7, location: 'Trout ward' },
    { id: 8, location: 'Eel ward' },
    { id: 9, location: 'Salmon ward' }
  ]}
]

const find = (id) => HOSPITALS.find(p => p.id === id)


const Hospitals = ( {match} ) => {
  let hospitals = HOSPITALS.map((hospital) => {
    return (
      <li key={hospital.id}>
        <Link to={`${match.url}/${hospital.id}/patients`} >
          {hospital.name}
        </Link>
      </li>
    )
  });

  return (
    <div>
      <h2>Hospitals</h2>
      <ul>
        {hospitals}
      </ul>

      <hr/>

      <Route path={`${match.url}/:hospitalID/patients`} component={Patients}/>
    </div>
  )
}

const Patients = ( {match} ) => {
  const hospitalArray = find(match.params.hospitalID)

  let patients = hospitalArray.patients.map((patient) => {
    return (
      <li key={patient.id}>
        <Link to={`${match.url}/${patient.id}`} >
          {patient.location}
        </Link>
      </li>
    )
  });

  return (
    <div>
      <h2>Patient for {match.params.hospitalID}</h2>
      <ul>
        {patients}
      </ul>

      <hr/>

      <Route path={`${match.url}/:patientID`} component={PatientDetail}/>

    </div>
  )
}


const PatientDetail = ({match}) => (
  <div>
    <h2>Patient details for {match.params.patientID}</h2>
  </div>
)




export default App;

从“React”导入React；
进口{
BrowserRouter作为路由器，
路线,，
链接
}从“反应路由器dom”
常量应用=（）=>(

家
找病人


)
常量Home=（）=>(
家
)
康斯特医院=[
{id:0，姓名：'St James'，患者：[
{id:1，位置：'Maple ward'}，
{id:2，位置：'Birch ward'}，
{id:3，位置：'Pine ward'}
]},
{id:1，姓名：'Harrogate医院'，患者：[
{id:4，位置：'Sycamore ward'}，
{id:5，位置：'Fern ward'}，
{id:6，位置：'Oak ward'}
]},
{id:2，姓名：'利兹普通医务室'，患者：[
{id:7，位置：'鳟鱼区'}，
{id:8，位置：'鳗鱼区'}，
{id:9，位置：'鲑鱼区'}
]}
]
const find=（id）=>HOSPITALS.find（p=>p.id==id）
康斯特医院=（{match}）=>{
让医院=医院。地图（（医院）=>{
返回(

{医院名称}

)
});
返回(
医院

{医院}


)
}
常量患者=（{match}）=>{
const hospitalArray=find（match.params.hospitalID）
let patients=hospitalArray.patients.map（（patient）=>{
返回(

{患者位置}

)
});
返回(
{match.params.hospitalID}患者

{患者}


)
}
常量PatientDetail=（{match}）=>(
{match.params.patientID}的患者详细信息
)
导出默认应用程序；

任何帮助或见解都将不胜感激

---

谢谢

未定义hospitalArray，这表明您的查找方法不起作用。您能否在患者组件中

控制台.log

您的

匹配.params

？看起来那里可能没有定义

hospitalID

，因此您的

find

方法失败

console.log（match.params.hospitalID）

记录正确的response@Antifish@BravoZulu我想我找到了问题所在。我需要将

const-find=（id）=>HOSPITALS.find（p=>p.id==id）

更改为

const-find=（id）=>HOSPITALS.find（p=>p.id==id）

（注意“==”而不是“==”）。不确定为什么这会产生差异，可能是因为当您从

params

读取它时，

hospitalID

是一个字符串，例如

'1'

。因此，当您使用数字

1

时，您会得到false，而使用

==

则是true。这是Javascript hahahospitalArray未定义，这表明您的查找方法不起作用。您能否在患者组件中

控制台.log

您的

匹配.params

？看起来那里可能没有定义

hospitalID

，因此您的

find

方法失败

console.log（match.params.hospitalID）

记录正确的response@Antifish@BravoZulu我想我找到了问题所在。我需要将

const-find=（id）=>HOSPITALS.find（p=>p.id==id）

更改为

const-find=（id）=>HOSPITALS.find（p=>p.id==id）

（注意“==”而不是“==”）。不确定为什么这会产生差异，可能是因为当您从

params

读取它时，

hospitalID

是一个字符串，例如

'1'

。因此，当您使用数字

1

时，您会得到false，而使用

==

则是true。那太好了，哈哈