Question

    export default function Detail(props){

    return(
        <Modal  {...props}>
            <Modal.Header closeButton style={{ backgroundColor: '#6595FC', color:'white' }}>
                <Modal.Title style={{ wordBreak: 'break-all' }}>
                    {props.jobname} Details
                </Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <Container>
                    <Row>
                        {props.detailData.detailData ? props.detailData.detailData[0].WORKFLOW_NAME : ''}
                        {props.detailData.detailData ? props.detailData.detailData[0].SQL_ID : ''} 
                    </Row>
                </Container>
            </Modal.Body>
            <Modal.Footer>
                <Button variant="primary" style={{ backgroundColor: '#6595FC' }}>Restart</Button>
            </Modal.Footer>
        </Modal>
    )
}

当有数据时，它工作得很好，但当没有数据时，它给我错误

类型错误：无法读取未定义的属性“WORKFLOW_NAME”

props.detailData.detailData ? props.detailData.detailData[0].WORKFLOW_NAME : ' ' 这不是应该像空支票一样工作吗？

Answer 1

您只是在检查 props.detailData.detailData 本身是否“真实”（它存在）。一个空数组存在并通过此检查，但它在位置 0 没有元素，因此尝试取消引用该元素将导致错误。

您还可以添加长度检查：

(props.detailData.detailData && props.detailData.detailData.length > 0) ? props.detailData.detailData[0].WORKFLOW_NAME : ''

如果您需要防御其他类型的不良数据，您还可以添加 an isArray() check，但这可能有点过头了。

Answer 2

大卫的回答是完美的。但你也可以这样做：

props.detailData?.detailData[0]?.WORKFLOW_NAME || ''

类型错误：无法读取属性 React JS

2 个答案: