reactjs - ReactJS：如何使用道具设置状态？

Question

我正在尝试设置从传递ExportReportRoomSelectionModal到状态的道具ExportModal。在道具中有一个数组selectedRooms。当我console.log(this.props.selectedRooms). 我可以看到数组已作为道具传递，<ExportModal selectedRooms={this.state.selectedRooms}但是当我将它设置为状态时ExportModal.js，roomIdNo: props.selectedRooms || []它似乎没有注册，因此值roomId保持为空或 null on 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 || [],

        };

标签： reactjsstatereact-props

Answer 1

在 .map() 迭代中使用您的 id 返回回调以修改传递的 id 值。

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