ReactJS: Как установить состояние с помощью реквизита?

Question

Я пытаюсь установить реквизиты, которые перешли из ExportReportRoomSelectionModal в состояние ExportModal.В реквизите есть массив selectedRooms.Когда я console.log(this.props.selectedRooms).Я вижу, что массив был передан как props <ExportModal selectedRooms={this.state.selectedRooms}, но когда я установил его в состояние на ExportModal.js, как, например, roomIdNo: props.selectedRooms || [], он не регистрируется, поэтому значение roomId остается пустым или равно нулю на ExportModal.js.

export default class ExportReportRoomSelectionModal extends React.Component {

    constructor(props) {
        super(props);

        const roomOrder = configContext.value.roomOrder;

        this.state = {
            rooms: roomOrder,
            selectedRooms: []
        };

        this.onSelectRooms = this.onSelectRooms.bind(this);
    }

    onSelectRooms = (e) => {

        const { selectedRooms } = this.state;
        const { id } = e.target;

        //remove room
        if(selectedRooms.includes(id)) { 
            const newSelectedRooms = selectedRooms.filter((name) => name !== id);
            this.setState({
                selectedRooms: newSelectedRooms
            });
        //add room
        } else{
            this.setState({
                selectedRooms: [...selectedRooms, id]
            }); 
        }
    }


    render() {


        return (
            <Modal >
                <Modal.Header closeButton>
                    <Modal.Title>Print PDF</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <p>Please select rooms</p>

                    <Grid fluid={true}> 
                        <Row className="show-grid">
                            { this.state.rooms.map((roomName, i ) => 

                                <Col key={i} xs={2} md={2}>
                                    <Panel 
                                        onClick={this.onSelectRooms}>         
                                        <Panel.Heading id={roomName}> 
                                            {roomName}                               
                                        </Panel.Heading>
                                    </Panel> 
                                </Col>
                            )}
                        </Row>
                    </Grid>

                </Modal.Body>
                <Modal.Footer>
                    <Button 
                        bsStyle="primary" 
                        onClick={this.props.handleHide}
                        data-toggle="modal"
                        data-dismiss="modal"
                        data-target="#export-modal"
                    >
                        Send PDF
                    </Button>
                    <Button bsStyle="primary" >Close</Button>
                </Modal.Footer>
                <ExportModal selectedRooms={this.state.selectedRooms} /> 
            </Modal>);
    }
}

export default class ExportModal extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            roomIdNo: props.selectedRooms || [],

        };

Answer 1

Использование вашего идентификатора в итерации .map (), возвращающей обратный вызов для модификации переданного значения идентификатора.

export default class ExportReportRoomSelectionModal extends React.Component {
    constructor(props) {
        super(props);
        if (Array.isArray(props.roomOrderInit))
            throw new Error("Room order is not an array");
        this.state = {
            rooms: props.roomOrderInit,
            selectedRooms: props.selectedRoomsInit || []
        };
        this.onSelectRooms = this.onSelectRooms.bind(this);
    }
    onSelectRooms(id) {
        return () => {
            const { selectedRooms } = this.state;
            //remove room
            if (selectedRooms.includes(id)) {
                const newSelectedRooms = selectedRooms.filter((name) => name !== id);
                this.setState({
                    selectedRooms: newSelectedRooms
                });
                //add room
            } else {
                this.setState({
                    selectedRooms: [...selectedRooms, id]
                });
            }
        }
    }
    render() {
        return (
            <Modal >
                <Modal.Header closeButton>
                    <Modal.Title>Print PDF</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <p>Please select rooms</p>

                    <Grid fluid={true}>
                        <Row className="show-grid">
                            {this.state.rooms.map((roomName, i) =>
                                <Col key={i} xs={2} md={2}>
                                    <Panel
                                        onClick={this.onSelectRooms(roomName)}
                                        bsStyle={this.state.selectedRooms.includes(roomName) ? 'success' : 'default'} >
                                        <Panel.Heading id={roomName}>
                                            {roomName}
                                        </Panel.Heading>
                                    </Panel>
                                </Col>
                            )}
                        </Row>
                    </Grid>

                </Modal.Body>
                <Modal.Footer>
                    <Button
                        bsStyle="primary"
                        onClick={this.props.handleHide}
                        data-toggle="modal"
                        data-dismiss="modal"
                        data-target="#export-modal"
                    >
                        Send PDF
                    </Button>
                    <Button bsStyle="primary" >Close</Button>
                </Modal.Footer>
                <ExportModal selectedRooms={this.state.selectedRooms} />
            </Modal>);
    }
}