React Native：Typescript - 数据可能未定义

Question

我正在使用 RTK 查询获取一些数据。我将此数据（对象数组）加载到屏幕中，然后将其中的一部分切片。

这更像是一个打字稿问题，但我会 post apiSlice:

interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

export const blogpostsApi = createApi({
  reducerPath: 'blogpostsApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:3500' }),
  endpoints: builder => ({
    getBlogPosts: builder.query<Post[], void>({
      query: () => '/todos',
      transformResponse: (res: Post[], meta) => res.sort((a, b) => b.id - a.id),
    }),
  }),
});

相关截图摘录：

const { data, isLoading } = useGetBlogPostsQuery();
const latestData = data?.slice(0, 10);
useEffect(() => {
    if (!isLoading && latestData.length > 0 && some_other_condition) {
    ... some code
    }
}, [latestData]);
useEffect(() => {
    if (!isLoading && latestData[0].id === 'something' && some_other_condition) {
    ... some code
    }
}, [latestData]);

如您所见，我已将可选的链接运算符添加到 data?.slice...（因为据我所见，这是针对 SO 的推荐解决方案。但是打字稿也会强调所有实例latestData.length 和 latestData[0].id.

现在我知道我也可以通过向所有这些实例添加可选的链接运算符来消除打字稿错误，但我想知道这真的是最好的方法，原因有两个：

将其添加到所有实例中会不必要地增加编译代码长度
我在上面的两个效果中使用 latestData 的方式是在条件语句中检查它是否 exists/is 已定义，因此它完全可以未定义。

所以我想我的问题是解决这个错误的正确方法是什么。添加可选的链接运算符不只是一个快速而肮脏的黑客来消除错误，特别是如果它出现在条件语句中吗？我知道我也可以通过让 Webstorm 忽略它来抑制错误（根据下面的错误截图）
错误：

Answer 1

这是绝对正常的行为。

可选的链接运算符不是 Typescript 的东西，它是 Javascript 并且它的工作原理是这样的：

myVar?.prop1?.prop2?.prop3

如果 myVar 是 undefined（或 null），则不会计算其余代码，整个表达式将 return undefined.

然后，如果myVar不是undefined（或null），那么代码将尝试访问prop1 属性的myVar.

由于在prop1之后还有一个?，所以会重复同样的过程，直到找到undefined/null或者到达链的末端之后没有找到任何 undefined/null.

您似乎混淆了 Javascript ? 运算符与 Typescript ! non-null 断言。

如果你只想告诉编译器你对变量是“non-null”（这也意味着非undefined）有信心，你可以使用!运算符相反。

像这样：

const { data, isLoading } = useGetBlogPostsQuery();
const latestData = data!.slice(0, 10); // change this line here
useEffect(() => {
    if (!isLoading && latestData.length > 0 && some_other_condition) {
    ... some code
    }
}, [latestData]);
useEffect(() => {
    if (!isLoading && latestData[0].id > 0 && some_other_condition) {
    ... some code
    }
}, [latestData]);

然而，你真的应该在使用前手动检查 data 是否不是 undefined 或 null。这甚至可以让您不必使用任何断言运算符！

像那样：

const { data, isLoading } = useGetBlogPostsQuery();
if (!data){
  // do something to handle the problem
}
const latestData = data.slice(0, 10);
useEffect(() => {
    if (!isLoading && latestData.length > 0 && some_other_condition) {
    ... some code
    }
}, [latestData]);
useEffect(() => {
    if (!isLoading && latestData[0].id > 0 && some_other_condition) {
    ... some code
    }
}, [latestData]);

React Native：Typescript - 数据可能未定义

React Native: Typescript - data possibly undefined

typescript

react-native