如何在 React 中映射数组并将其作为道具正确传递给子组件？

Question

我有一个子组件 PatientRow，它从它的父组件 ObsTabel 接收映射的患者数组。奇怪的是 PatientRow 永远不会被渲染，而且我在 React 开发工具上也找不到 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>
        );
    }
}

Answer 1

这是因为您没有在地图内返回任何内容

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>
 );