javascript - 如何在 React 中映射数组并将其作为道具正确传递给子组件?
问题描述
我有一个子组件PatientRow
,它从它的父组件接收映射的患者数组ObsTabel
。奇怪的是 PatientRow 永远不会被渲染,我也无法在 React Dev 工具上找到 PatientRow 组件。另一方面,如果我只是传递患者数组,然后将其映射PatienRow
到组件中,就会被渲染,但这不是我想要的。我想将数组映射到ObsTabel
并将其传递给,PatientRow
以便行是具有自己状态的单个组件。如果您能找到我的错误,请告诉我。注意: ObsTable 有一个父组件,它从该组件接收作为道具传递的患者数组。文件结构——ParentComponent(with patient array).js>ObsTable.js>PatientRow.js
This doesn’t exist in DOM
export default class PatientRow extends React.Component {
constructor(props) {
super(props);
this.state = {
disabled: false
};
}
render() {
const { id, label, name, room, timestamp, observationLevel, roomStatus, patient, index } = this.props;
console.log(this.props);
return (
<tbody>
<tr key={id} >
<td>{label}</td>
<td>{name}</td>
<td>{observationLevel}</td>
<td>{roomStatus}</td>
<td>{timestamp} </td>
<td>
<div>
<Button> Awake </Button>
<Button>Asleep/Breathing</Button>
</div>
<Button> View Room </Button>
<div>
<Button>Awake </Button>
</div>
</td>
<td>
<Button>Asleep</Button>
</td>
</tr>
</tbody>
);
}
}
export default class ObsTabel extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<div >
<Table bordered striped hover >
<thead>
<tr>
<th>Room</th>
<th>Patient Name</th>
<th> Obs Level </th>
<th>Room Status</th>
<th>Obs Due In</th>
<th>Patient Location</th>
<th>Patient Obs Detail</th>
<th>Comment</th>
</tr>
</thead>
{this.props.patients.map((patient, index) => {
// console.log(patient); logs each patient
<div key={index}>
<PatientRow
name={patient.name}
id={patient.id}
label={patient.label}
room={patient.room} observationLevel={patient.observationLevel}
roomStatus={patient.roomStatus}
timestamp={patient.timestamp}
index={index}
/>
</div>;
})}
</Table>
</div>
</div>
);
}
}
解决方案
这是因为您没有在地图内返回任何内容
return (
<div key={index}>
<PatientRow
name={patient.name}
id={patient.id}
label={patient.label}
room={patient.room}
observationLevel={patient.observationLevel}
roomStatus={patient.roomStatus}
timestamp={patient.timestamp}
index={index}
/>
</div>
);
推荐阅读
- javascript - 升级后 VS 代码 JavaScript 错误语法荧光笔不起作用
- amazon-web-services - 如何链接 AWS Lambda 事件以重试给定调用?
- python - 找到 3 个变量的最大奇数 - 反馈
- django-allauth - 如何将 Google One Tap 登录与 django-allauth 集成?
- reactjs - Firebase,React:如何在客户端显示 http 错误?
- python - 使用函数制作“折叠列表”
- c# - 如何创建带参数的函数以在对象列表中查找特定对象
- javascript - 如何在 Chrome 或 Firefox 中监控或分析 DOM 更新?
- c# - 在 SqlBulkCopy.WriteToServer 异常上查找失败的行并通过省略那些失败的行来重试 SqlBulkCopy
- excel - Excel 数据表示,轴标签非数字