reactjs - 主对象可能未定义时的双重解构

Question

这个问题已经有答案了:

Destructuring with nested objects and default values (3 个回答)

已关闭 3 年前。

首先，我的问题并不是重复ES6 double destructure

看下面的代码 - Apollo 客户端 GraphQL

import { gql, useQuery, useMutation } from '@apollo/client';
...
const { loading, error, data } = useQuery(TREATMENTS);

这样写会更好:

   const { loading, error, data : {treatments} } = useQuery(TREATMENTS);

但是，不幸的是我遇到了以下错误:

TypeError: Cannot read property 'treatments' of undefined
TreadDetails
C:/Users/albertly/Downloads/git/individual-claims/src/TreatDetails.tsx:35

  32 | `;
  33 | 
  34 | function TreadDetails(): React.ReactElement {
> 35 |   const { loading, error, data : {treatments} } = useQuery(TREATMENTS);
  36 |  // const [treatments, setTreatments] = useState<Treatment[]>([]);
  37 |   const { state: stateApp, dispatch: dispatchApp } = useContext(AppContext); 

我完全理解为什么会发生这种情况。

我的问题是:是否有一些语法技巧可以使其发挥作用？

编辑:我注意到有一个非常相似的问题 Destructuring with nested objects and default values

Answer 1

为要解构的数据提供初始值。

const { loading, error, data: { treatments } = {} } = useQuery(TREATMENTS);