TypeError:无法读取属性React JS

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:"这不是像null一样工作吗；空头支票？

Answer 1

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

您还可以添加长度检查：

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

如果您需要防范其他类型的坏数据，您也可以添加isArray()检查，但这可能有些过头了。

Answer 2

David的答案是完美的。但你也可以这样做：

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