Question

我正在制作一个通用组件，并在复合组件中使用它，我还将一些道具传递给通用组件以某种方式运行。我使用Redux来管理我的状态，但是在更新状态时Redux组件未使用更新后的状态重新呈现。这些是组件：
通用组件

export default class LabeledCheckBox extends Component {
    constructor(props) {
        super(props);
        this.state = {
            checked: false,
            uncheckable: this.props.disableCheckBox
                ? this.props.disableCheckBox
                : false
        };
    }

    handleChange = (event) => {
        this.setState({ checked: event.target.checked });
    };

    render() {
        return (
            <Form.Group as={Row}>
                <Form.Label column="True" sm={9}>
                    {this.props.controlLabel}
                </Form.Label>
                <Col sm={3}>
                    <Form.Check
                        type="checkbox"
                        onChange={this.handleChange}
                        checked={this.state.checked}
                        onClick={this.props.clicked}
                        disabled={this.state.uncheckable}
                    />
                </Col>
            </Form.Group>
        );
    }
}

LabeledCheckBox.propTypes = {
    controlLabel: PropTypes.string.isRequired,
    disableCheckBox: PropTypes.bool
};

父级组件

export default class Endorsments extends Component {
    constructor(props, context) {
        super(props, context);

        this.state = {
            open: false
        };
    }

    render() {
        const { open } = this.state;
        return (
            <React.Fragment>
                <LabeledCheckBox
                    clicked={() => this.setState({ open: !open })}
                    aria-controls="example-collapse-text"
                    aria-expanded={open}
                    controlLabel="Apply Endorsment"
                    disableCheckBox={!this.props.EndorsementSupported}
                />
                <Collapse in={this.state.open}>
                    <div id="example-collapse-text">
                        <LabeledTextBoxWithCheckBox
                            controlLabel="BankName"
                            controlName="setBankName"
                            style={{ paddingBottom: '10px' }}
                        />

                        <LabeledDateWithCheckBox controlLabel="Cheque Date" />

                        <Row>
                            <Col sm={6}>
                                <LabeledCheckBox controlLabel="User Name" />
                            </Col>
                            <Col sm={6}>
                                <LabeledCheckBox controlLabel="Cheque Sequence" />
                            </Col>
                        </Row>
                    </div>
                </Collapse>
            </React.Fragment>
        );
    }
}

复合组件

class Preferences extends Component {
    constructor(props, context) {
        super(props, context);
        this.props.fetchSupportedVendors();
    }

    loadScannersBasedOnVendor = () => {
        if (
            this.props.lastSelected.name === 'scannersVendors' ||
            this.props.supportedScannerModule.length !== 0
        ) {
            let select = this.props.supportedScannerModule.filter(
                (element) =>
                    element.vendor ===
                    this.props.lastSelected.selectedObject.value
            );
            return select.map((element) => {
                return { value: element.Value, label: element.name };
            });
        }
    };

    loadScannerMicrFonts = () => {
        let supportedMicrs = [];
        this.props.scannerCapabilities.supportedMicrFonts.forEach(
            (element, key) => {
                if (element.supported)
                    supportedMicrs.push({ value: key, label: element.value });
            }
        );
        return supportedMicrs;
    };

    loadScannerBitDepth = () => {
        let supportedBitDepth = [];
        this.props.scannerCapabilities.supportedBitDepth.forEach(
            (element, key) => {
                if (element.supported)
                    supportedBitDepth.push({
                        value: key,
                        label: element.value
                    });
            }
        );
        return supportedBitDepth;
    };

    afterSelectionEnded = () => {
        if (
            this.props.lastSelected &&
            this.props.lastSelected.name === 'scannersModel' &&
            !this.props.scannerCapabilities.supportedBitDepth
        ) {
            this.props.loadScannerCapablilitiesToState(
                this.props.lastSelected.selectedObject.value
            );
        }
    };

    render() {
        return (
            <Modal
                {...this.props}
                aria-labelledby="contained-modal-title-vcenter"
                centered
                dialogClassName="scanningModal"
            >
                <Modal.Header closeButton>
                    <Modal.Title id="contained-modal-title-vcenter">
                        Preferences
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <Row>
                        <h4>Default Scanner</h4>
                    </Row>
                    <Row>
                        <Col sm={12}>
                            <LabeledDropDown
                                controlLabel="Vendor"
                                controlName="scannersVendors"
                                placeholder="select a vendor please"
                                dropdownValues={
                                    this.props.supportedScannerVendor
                                }
                            />
                        </Col>
                    </Row>
                    <Row>
                        <Col sm={12}>
                            <LabeledDropDown
                                controlLabel="Model"
                                controlName="scannersModel"
                                placeholder="select model"
                                dropdownValues={[]}
                                loadDynamicItems={
                                    this.loadScannersBasedOnVendor
                                }
                                afterValueChanged={this.afterSelectionEnded}
                            />
                        </Col>
                    </Row>
                    <Row>
                        <Col sm={6}>
                            <VerticalLabeledDropDown
                                controlLabel="MICR Font"
                                controlName="ScannerMicrFont"
                                placeholder="select MICR Font"
                                dropdownValues={[]}
                                loadDynamicItems={this.loadScannerMicrFonts}
                            />
                        </Col>
                        <Col sm={6}>
                            <VerticalLabeledDropDown
                                controlLabel="Bit Depth"
                                controlName="scannerBitDipth"
                                placeholder="select BitDepth"
                                dropdownValues={[]}
                                loadDynamicItems={this.loadScannerBitDepth}
                            />
                        </Col>
                    </Row>
                    <hr />
                    <Row>
                        <h4>Scanner Feature</h4>
                    </Row>
                    <Endorsments
                        EndorsementSupported={
                            this.props.scannerCapabilities.supportedEndorsement
                        }
                    />
                    <hr />
                    <Row>
                        <h4>General</h4>
                    </Row>
                    <Row>
                        <Col sm={6}>
                            <LabeledCheckBox controlLabel="Auto Save" />
                        </Col>
                        <Col sm={6}>
                            <LabeledCheckBox controlLabel="View While Scanning" />
                        </Col>
                    </Row>
                    <Row>
                        <Col sm={6}>
                            <LabeledCheckBox controlLabel="Use OCR for amount & date" />
                        </Col>
                        <Col sm={6}>
                            <LabeledCheckBox controlLabel="With UV scan" />
                        </Col>
                    </Row>
                    <Row>
                        <Col sm={12}>
                            <LabeledCheckBox controlLabel="Dont Show Prining language dialog" />
                        </Col>
                    </Row>
                </Modal.Body>
                <Modal.Footer bsPrefix="internal-modal-footer">
                    <Button onClick={this.props.onHide}>Close</Button>
                    <Button onClick={this.props.onHide}>Apply</Button>
                </Modal.Footer>
            </Modal>
        );
    }
}

const mapStateToProps = (state) => ({
    supportedScannerVendor: state.supportedScanners.supportedVendors,
    supportedScannerModule: state.supportedScanners.SupportedScanners,
    lastSelected: state.dropdownEvents.dropDownSelectionChanged,
    scannerCapabilities: state.supportedScanners.ScannerCapabilities
});

export default connect(mapStateToProps, {
    fetchSupportedVendors,
    loadScannerCapablilitiesToState
})(Preferences);

最后
调用loadScannerCapablilitiesToState时，状态已更改为this.props.scannerCapabilities.supportedEndorsement，但并未重新呈现通用组件以使其禁用或启用

我需要任何帮助吗？

Answer 1

如果Redux状态正常工作，则需要更改LabeledCheckBox组件中的状态。

componentDidUpdate()在更新发生后立即被调用。

componentDidUpdate = (prevProps, prevState) => {
  if (prevProps.disableCheckBox !== this.props.disableCheckBox) {
    this.setState({ uncheckable: this.props.disableCheckBox });
  }
};

详细了解React https://developer.apple.com/streaming/fps/

更改Redux状态不会影响渲染视图

1 个答案: