[英]How to map over an array and pass it as props to child component correctly in React?
我有一个子组件PatientRow
,它从其父ObsTabel
props中接收映射的患者数组。 奇怪的是,PatientRow从未渲染,我也无法在React Dev工具上找到PatientRow组件。 另一方面,如果我只是传递患者数组,然后将其映射到PatienRow
中, 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>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.