4

React-Query 通常会返回一些查询状态，例如isLoading, isError。该库保证这些布尔值是稳定的。onSuccess这意味着如果例如检查布尔值，我们可以确定数据存在。然而，这 - 当然 - 对于 TS 编译器来说是不够的。即使在检查之后，它也假定数据可以是undefined. 让 TS 编译器知道数据存在的最佳方法是什么？

这是文档中的一个示例：

function Todos() {
   const { isLoading, isError, data, error } = useQuery('todos', fetchTodoList)
 
   if (isLoading) {
     return <span>Loading...</span>
   }
 
   if (isError) {
     return <span>Error: {error.message}</span>
   }
 
   // --> The data is now sure to exist

   return (
     <ul>
       {data.map(todo => ( // --> this will not work with the TS compiler.
         <li key={todo.id}>{todo.title}</li>
       ))}
     </ul>
   )
 }
4

2 回答 2

6

react-query 在 v3 中添加了有区别的联合，所以这通常有效。status您可以按字段以及派生的布尔标志进行区分。但是，您需要记住两点：

  1. 如果您破坏，受歧视的工会将不起作用。这与 react-query 无关，而与 TypeScript 无关。如果您通过解构从对象中“取出”一个字段，它就无法再区分该对象。

  2. react-query 有一个额外的状态：（isIdle或status === 'idle'），如果通过enabled: false.

记住这两件事，这应该有效：

function Todos() {
   const queryInfo = useQuery('todos', fetchTodoList)
 
   if (queryInfo.isLoading || queryInfo.isIdle) {
     return <span>Loading...</span>
   }
 
   if (queryInfo.isError) {
     return <span>Error: {error.message}</span>
   }
 
   // --> The data is now sure to exist

   return (
     <ul>
       {queryInfo.data.map(todo => ( // --> TS is happy now
         <li key={todo.id}>{todo.title}</li>
       ))}
     </ul>
   )
 }

当然，您也可以只检查isSuccess或status === 'success'缩小类型。

于 2021-01-09T15:53:08.840 回答
0

当您需要加载一次数据时，例如在应用程序启动时，我个人喜欢使用“Gate”组件。门的作用是只要数据还没有加载，就停止进一步的渲染。当最终加载数据时，我使用 context&customHook 来读取我的初始数据。在这一点上，我确定我的数据不会未定义。您可以在此处查看 PoC

于 2022-01-05T11:46:45.857 回答