未捕获的类型错误：无法解构'data.detailInfo'的属性'id'，因为它未定义

Question

import React, { Component } from 'react';
import { InfoConsumer } from '../context';
class Details extends Component {
render() {
return (
<InfoConsumer>
{data => {
const {
id,
headerTitle,
headerSubTitle,
headerText,
img,
title,
maps,
description
} = data.detailInfo;
return (
<React.Fragment>
<div className="conteiner-fluid align-items-center">
<h1 className='display-1 font-weight-bold'>{headerTitle}</h1>
<h4 className='display-5'>{headerSubTitle}</h4>
<p>{headerText}</p>
</div>
</React.Fragment>
);
}}
</InfoConsumer>
);
}
}
export default Details;

我使用严格的相等运算符===检查JavaScript中是否有未定义的，并将其与未定义的原语进行比较。如果变量尚未声明，则以这种方式检查"undefined"将适用于除一个用例之外的所有用例。

Answer 1

您应该使用可选的链接，以便在不考虑状态变化的情况下保持data.detailInfo值的整体一致性。

因此，只有将包括} = data.detailInfo;的行更改为} = data?.detailInfo;，才能防止在"；数据"；是CCD_ 4。

import React, { Component } from 'react';
import { InfoConsumer } from '../context';
class Details extends Component {
render() {
return (
<InfoConsumer>
{data => {
const {
id,
headerTitle,
headerSubTitle,
headerText,
img,
title,
maps,
description
} = data?.detailInfo;
return (
<React.Fragment>
<div className="conteiner-fluid align-items-center">
<h1 className='display-1 font-weight-bold'>{headerTitle}</h1>
<h4 className='display-5'>{headerSubTitle}</h4>
<p>{headerText}</p>
</div>
</React.Fragment>
);
}}
</InfoConsumer>
);
}
}
export default Details;