主对象可能未定义时的双重解构[重复]答案

【问题标题】：Double Destructuring when main object may be undefined [duplicate]主对象可能未定义时的双重解构[重复]
【发布时间】：2021-02-11 15:06:31
【问题描述】：

首先我的问题不是ES6 double destructure的重新散列

看下面的代码——Apollo Client 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

【问题讨论】：

问题stackoverflow.com/questions/39049399/… - “使用嵌套对象和默认值进行解构”确实回答了我的问题。虽然我的问题更具体，但如果我找到了这个答案，我会弄清楚该怎么做，我不会问它。当我试图删除这个问题时，我得到了一个系统建议，不建议删除。怎么办？
最好保持原样（没有状态重复），因为它可能对社区有所帮助 - 我的问题更清楚了。

标签： reactjs typescript ecmascript-6 react-apollo

【解决方案1】：

为data 提供一个初始值以进行解构。

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

【讨论】：