如何处理Typescript中的数组“可能未定义”错误

huangapple
go评论80阅读模式
英文:

How to account for array "is possibly undefined" error in Typescript

问题

我有一个名为availableOfferings的数组，它在API调用完成后设置。

  1. const { offerings: availableOfferings } = useGetOfferings();

然后，我有两个变量依赖于availableOfferings中的数据。

  1. const bestOffering = availableOfferings[0];
  3. const relevantOfferings = availableOfferings
  4.     .slice(1)
  5.     .filter((off: any) => isGoodFit(off));

在初始化上述两个变量时，我会收到一个TypeScript错误，该错误显示'availableOfferings'可能为'undefined'。

解决此问题的最佳方法是什么？

我尝试了以下方法，它有效，但看起来不够优雅：

  1. const bestOffering = availableOfferings ? availableOfferings[0] : undefined;
  3. const relevantOfferings = availableOfferings
  4.   ? availableOfferings.slice(1).filter((off: any) => isGoodFit(off))
  5.   : undefined;

以下是如何使用useGetOfferings提取数据的方式：

  1. export const OfferingsContext = createContext<{
  2.   [x: string]: any;
  3.   offerings?: {
  4.     [x: string]: any;
  5.   };
  6. }>({
  7.   offerings: {},
  8. });
  10. export function useGetOfferings() {
  11.   return useContext(OfferingsContext);
  12. }
  1. function OfferingsProvider({ children }: Props) {
  2.   const [offerings, setOfferings] = useState([]);
  3.   const [hasGoodFits, setHasGoodFits] = useState(undefined);
  4.   const { getAccessTokenSilently } = useAuth0();
  5.   const fetchData = async () => {
  6.     try {
  7.       const responseOfferings = await BusinessApi.getOfferings(
  8.         getAccessTokenSilently
  9.       );
  10.       const hasGoodFitsResult = responseOfferings.data.data.some(
  11.         (offering: any) => isGoodFit(offering)
  12.       );
  13.       setOfferings(responseOfferings.data.data);
  14.       setHasGoodFits(hasGoodFitsResult);
  15.       return { responseOfferings, hasGoodFitsResult };
  16.     } catch (error) {
  17.       console.log(error);
  18.     }
  19.   };
  20.   useEffect(() => {
  21.     fetchData();
  22.   }, []);
  24.   return (
  25.     <OfferingsContext.Provider
  26.       value={{ offerings, fetchData, hasGoodFits }}
  27.       children={children}
  28.     />
  29.   );
  30. }
英文:

I have an array called availableOfferings that gets set after an API call is completed.

  1. const { offerings: availableOfferings } = useGetOfferings();

Then, I have two variables that rely on the data contained in availableOfferings

  1. const bestOffering = availableOfferings[0];
  3. const relevantOfferings = availableOfferings
  4.     .slice(1)
  5.     .filter((off: any) =&gt; isGoodFit(off));

When initialized the two variables above, I get a Typescript error that says &#39;availableOfferings&#39; is possibly &#39;undefined&#39;.

What is the best way to resolve this issue?

I tried this and it worked but doesn't look too elegant:

  1. const bestOffering = availableOfferings ? availableOfferings[0] : undefined;
  3. const relevantOfferings = availableOfferings
  4.   ? availableOfferings.slice(1).filter((off: any) =&gt; isGoodFit(off))
  5.   : undefined;

Here is how the data is being pulled with useGetOfferings:

  1. export const OfferingsContext = createContext&lt;{
  2.   [x: string]: any;
  3.   offerings?: {
  4.     [x: string]: any;
  5.   };
  6. }&gt;({
  7.   offerings: {},
  8. });
  10. export function useGetOfferings() {
  11.   return useContext(OfferingsContext);
  12. }
  1. function OfferingsProvider({ children }: Props) {
  2.   const [offerings, setOfferings] = useState([]);
  3.   const [hasGoodFits, setHasGoodFits] = useState(undefined);
  4.   const { getAccessTokenSilently } = useAuth0();
  5.   const fetchData = async () =&gt; {
  6.     try {
  7.       const responseOfferings = await BusinessApi.getOfferings(
  8.         getAccessTokenSilently
  9.       );
  10.       const hasGoodFitsResult = responseOfferings.data.data.some(
  11.         (offering: any) =&gt; isGoodFit(offering)
  12.       );
  13.       setOfferings(responseOfferings.data.data);
  14.       setHasGoodFits(hasGoodFitsResult);
  15.       return { responseOfferings, hasGoodFitsResult };
  16.     } catch (error) {
  17.       console.log(error);
  18.     }
  19.   };
  20.   useEffect(() =&gt; {
  21.     fetchData();
  22.   }, []);
  25.   return (
  26.     &lt;OfferingsContext.Provider
  27.       value={{ offerings, fetchData, hasGoodFits }}
  28.       children={children}
  29.     /&gt;
  30.   );
  31. }

答案1

得分: 2

这就是 可选链操作符 ?. 和 空值合并操作符 ?? 发挥作用的时候：

  1. const bestOffering = availableOfferings?.[0];
  3. const relevantOfferings = (availableOfferings ?? [])
  4.     .slice(1)
  5.     .filter((off: any) => isGoodFit(off));
英文:

That's when optional chaining ?. and nullish coalescing operator ?? comes into handy:

  1. const bestOffering = availableOfferings?.[0];
  3. const relevantOfferings = (availableOfferings ?? [])
  4.     .slice(1)
  5.     .filter((off: any) =&gt; isGoodFit(off));

答案2

得分: 1

你可以给availableOfferings设置一个默认值[]，这样它总是有一个备用值 => 警告会消失。

  1. const { offerings: availableOfferings = [] } = useGetOfferings()

但我不确定为什么你要将offerings声明为object类型，而不是array类型（在OfferingsContext中）。

英文:

You can give the availableOfferings a default value as [], so it always has a fallback value => the warning will be gone.

  1. const { offerings: availableOfferings = [] } = useGetOfferings()

But I'm not sure why you declare your offerings with type object instead of type array (in OfferingsContext).

huangapple
  • 本文由 发表于 2023年2月6日 08:10:37
  • 转载请务必保留本文链接：https://go.coder-hub.com/75356380.html
  • reactjs
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定